实现 tp循环输出el

admin

php-html
4 V1 ^+ q: g7 x( I( N

1. <div id = "computed_props{$v['id']}">
   
2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
   ; j) U7 U  m, ~- C$ U
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">
   
2.                
   2 Z4 `8 n+ J! {, `$ ~  s6 m
3.                 var ids = <?=$v['id']?>;
   , c- l& g' I* ^
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   + I" |( R3 u  Z  x1 K/ l
5.                
   
6.          var vm = new Vue({
   2 y# {6 e7 y6 a; Z# l" l
7.             el: '#computed_props'+<?=$v['id']?>,
   ! }" t  ^7 L% t0 g/ B
8.             data: {
   2 x# q2 B. F0 M) q, u
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',
    ( ~! ]! X  z0 T: X1 d) q* L
13.             },
    : K4 Y* }0 J0 O0 T8 n
14.             methods: {
    0 |( I! m9 m$ y* t1 ~/ i' A
15.                        
    ' g9 X/ t4 p# P$ b0 ]
16.             },
    
17.             computed :{
    5 f. n. Z% O& R
18.             },
    
19.             watch : {
    ( m0 b3 k' w( z! G
20.                kilometers:function(val) {
    + t# S/ b  K+ y$ [) c
21.                   this.kilometers = val;
    8 {/ R+ ^9 C! r3 |2 m2 J1 h, P
22.                   this.meters = val ;
    # u% G8 n9 ?9 y! t& \
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    + e& _9 Q2 w! H! q
24.                },
    * Z* ?% @, _# {$ r1 S2 K6 C' L
25.                meters : function (val) {
    + f# r7 ~# X0 I4 O9 M8 k- I
26.                   this.kilometers = val;
    
27.                   this.meters = val;
    
28.                }
    
29.             }
    : v) {1 N9 Z) @; w4 x% z7 Z" I
30.          });
    
31. 
    
32. 
    ) C# r, |, A+ W) D; j; N  v) z
33. </script>

复制代码

) i9 C) h9 K/ p9 M# p. J0 B