实现 tp循环输出el

admin

php-html
9 _( ^- f, L( T" H0 v

1. <div id = "computed_props{$v['id']}">
   
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
; e7 X* e9 }  e) }0 d3 H

1. <script type = "text/javascript">
   
2.                
   
3.                 var ids = <?=$v['id']?>;
   $ B4 Y1 S; X. y. t/ D4 b3 U6 k
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   
5.                
   7 r6 p' }/ F. k& `2 f7 w% Z, d  n) C
6.          var vm = new Vue({
   7 s* e- c! M, w$ W
7.             el: '#computed_props'+<?=$v['id']?>,
   , O) T4 U2 F( r
8.             data: {
   
9.                kilometers : <?=$v['shop_xjcbl']?>,
   
10.                meters: <?=$v['shop_xjcbl']?>,
    
11.                            id:<?=$v['id']?>,
    
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    9 G& b! y* n: Q& }
13.             },
    
14.             methods: {
    
15.                        
    
16.             },
    1 X$ C3 P$ _: E" Z) O3 L
17.             computed :{
    ! g4 i7 w8 T6 C1 h
18.             },
    " e8 X; ~3 d6 R+ W! H9 u
19.             watch : {
    
20.                kilometers:function(val) {
    
21.                   this.kilometers = val;
    
22.                   this.meters = val ;
    # ]) z7 q8 \0 q4 c6 d/ m+ s0 I
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
      ]7 M4 p( B" ^7 T
24.                },
    
25.                meters : function (val) {
    7 K4 H( Y- v0 J& C2 t+ n
26.                   this.kilometers = val;
    
27.                   this.meters = val;
    - ^5 E  I9 a. B' P1 a6 @
28.                }
    1 }! C; S; S5 M& @6 f
29.             }
    ! z3 v: F' c; |6 [! Y: J) P. p. t
30.          });
    
31. 
    . e2 m. J0 m+ p; T
32. 
    
33. </script>

复制代码

3 C1 ~9 n. ~4 a4 L' b! ?% R