实现 tp循环输出el

admin

php-html
. g8 P( m, h0 J/ A

1. <div id = "computed_props{$v['id']}">
   
2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
   * l1 N" S% k$ n& N
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.                
   3 d8 \5 ~) c" O% H
3.                 var ids = <?=$v['id']?>;
   8 {0 m5 q5 C9 a$ D6 A* V6 X
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   " b  v- ~# ^3 X$ N
5.                
   
6.          var vm = new Vue({
   
7.             el: '#computed_props'+<?=$v['id']?>,
   
8.             data: {
   
9.                kilometers : <?=$v['shop_xjcbl']?>,
   5 ^4 V! ?% O- i- Z
10.                meters: <?=$v['shop_xjcbl']?>,
    
11.                            id:<?=$v['id']?>,
    $ Y" p  H0 e$ D' N, G! N
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    
13.             },
    + r- y* {& [4 h6 y! s
14.             methods: {
    
15.                        
    
16.             },
    9 n9 q( ~4 F5 C3 b
17.             computed :{
    
18.             },
    
19.             watch : {
    
20.                kilometers:function(val) {
    & ]8 g- o  O) a* s
21.                   this.kilometers = val;
    9 J3 y, t9 _( K6 \3 x" }( Z
22.                   this.meters = val ;
    : H- _4 V3 V; L* \4 R' M0 z
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    / t8 g6 M  l' A5 C
24.                },
    
25.                meters : function (val) {
    % F. H7 {" I3 p+ u9 _# H( W
26.                   this.kilometers = val;
    ! ]2 T0 p4 S7 J" t: t* o
27.                   this.meters = val;
    
28.                }
    
29.             }
    
30.          });
    
31. 
    ) k. ?2 y0 q4 w% y% b
32. 
    , T( w% X" t) X9 e9 b, X
33. </script>

复制代码

2 ~# z4 H& ^3 d5 R, z
5 r' ?) q0 V; Q: y  i) k: y