您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 14745|回复: 0
打印 上一主题 下一主题

[Vue.js] 实现 tp循环输出el

[复制链接]
跳转到指定楼层
楼主
发表于 2018-8-6 20:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
php-html
( I& R2 {  U+ z0 H! I  I
  1. <div id = "computed_props{$v['id']}">$ m  k  _( h2 ?& Z$ {. t5 r
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >2 Y; Y& n  g% B1 r5 F8 p  j
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
    " g1 V; n2 j3 @: @7 D
  4. </div>
复制代码
vue.js8 b1 N$ \7 \3 C, e9 j- k
  1. <script type = "text/javascript">
    4 R7 w5 S- k6 T/ K" ^3 n: y9 ]
  2.                
    # C4 Y/ U8 t( [& @
  3.                 var ids = <?=$v['id']?>;9 q- k1 Z; X0 u- k
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
    ( M* ]1 I, I% N, Y. D- c0 i
  5.                 / a1 D: |) P$ ]! E% _
  6.          var vm = new Vue({" N# M* u! V4 g7 d! ~3 B% c* i2 G
  7.             el: '#computed_props'+<?=$v['id']?>,
    9 }) b' \, @" d' B
  8.             data: {: [9 g" Z1 T, V9 f2 p) ?* S& G
  9.                kilometers : <?=$v['shop_xjcbl']?>,* U$ c. `% J) n; i9 J
  10.                meters: <?=$v['shop_xjcbl']?>,
    6 O( v6 f7 h! w7 {
  11.                            id:<?=$v['id']?>,
    # t0 U. N3 S; E( ^
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    ( t9 }, n2 H8 t9 O
  13.             },- t5 w# w. a4 j9 f9 {, [  z% `
  14.             methods: {# Z: f$ J. ^% O
  15.                        
    6 M9 b' N' o. {1 N3 i5 u
  16.             },
    3 m5 U( g7 g3 q6 _2 Q
  17.             computed :{
    ' V6 A2 |; o4 V* e. X
  18.             }," t% d) y4 U; {8 s
  19.             watch : {
    " g9 f2 v* h+ Q2 E% K7 F
  20.                kilometers:function(val) {9 ]' W3 D/ Q* i$ e6 N, I
  21.                   this.kilometers = val;/ p' Z* `! j: Y. W6 P4 i
  22.                   this.meters = val ;, M7 ?) u  m+ Q+ b$ v% L6 k
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';; W$ ~5 l7 E% m3 l
  24.                },
    ( ?( [! _5 ^  ]. h& C4 ?+ i
  25.                meters : function (val) {
    $ ^/ E6 n  c, d. S! W" r* \
  26.                   this.kilometers = val;
    9 ~& [- @, Z$ F
  27.                   this.meters = val;; e7 h% \# P; C6 U
  28.                }* T7 S  @# X) b+ m( @( R! q
  29.             }$ N5 M; W. ~. _4 y! ~, a) M- ?
  30.          });, p: |1 D0 x0 E+ T' Z
  31. - v: ]& y. E* {8 `+ T5 s

  32. 4 V% U; Q8 i, d9 O3 n- N
  33. </script>
复制代码

( M2 x. p& Q1 f+ T* |1 w- a: d0 M& f' J" b1 D7 A) c
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-9-22 04:11 , Processed in 0.065241 second(s), 19 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!