实现 tp循环输出el

admin

php-html
* d0 M& C4 W0 [0 w) x8 j3 ~* P

1. <div id = "computed_props{$v['id']}">
   : T1 ]' t* z: |' c6 p
2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
   
3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
   
4. </div>

复制代码

vue.js

1. <script type = "text/javascript">
   0 l$ ]& H3 {& x, b5 _4 ?
2.                
   
3.                 var ids = <?=$v['id']?>;
   
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   
5.                
   
6.          var vm = new Vue({
   0 R5 `2 `( D9 ]  G( Y  a" @
7.             el: '#computed_props'+<?=$v['id']?>,
   
8.             data: {
   
9.                kilometers : <?=$v['shop_xjcbl']?>,
   $ V4 E7 i8 e+ b. E6 E
10.                meters: <?=$v['shop_xjcbl']?>,
    - \, [' Y3 s+ B5 x# R) L9 z
11.                            id:<?=$v['id']?>,
    ! @' V' x0 U, g! c
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    8 h: }, q$ \  y0 B( t
13.             },
    / I3 Z2 V3 r- W" N% m
14.             methods: {
    
15.                        
    ' j  y+ [$ R; O
16.             },
    ! w7 B; r5 Y% j; A% d8 p, A
17.             computed :{
    
18.             },
    
19.             watch : {
    0 Z% N& Q3 Z6 S" o1 l
20.                kilometers:function(val) {
    
21.                   this.kilometers = val;
    " H7 g; u6 v6 u: O! J+ J
22.                   this.meters = val ;
    0 x# y4 E8 t& w6 o3 A9 z+ i
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    
24.                },
    ' V9 @' t1 G7 E! @0 @+ k& O0 H5 ~) K
25.                meters : function (val) {
    
26.                   this.kilometers = val;
    . s! D; m1 T0 P
27.                   this.meters = val;
    
28.                }
    
29.             }
    : N1 k5 r/ D1 [6 V, l  ~" a
30.          });
      `  F( ~  {: O* v/ Y: H3 i
31. 
    
32. 
    & H# Z" [) x8 O
33. </script>

复制代码

9 ~! Y& p  p# v; x: u! o  s" r
/ k+ V, k7 V% o+ ^, k' p6 V