实现 tp循环输出el

admin

php-html
( h" @! r& S4 Y0 ^' C

1. <div id = "computed_props{$v['id']}">
   ( i! V: Y- q& ~
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>
   : Z# C% ~; ^) c  c
4. </div>

复制代码

vue.js
/ m3 Q" g- Z8 d3 f+ \  `4 c

1. <script type = "text/javascript">
   
2.                
   
3.                 var ids = <?=$v['id']?>;
   
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   
5.                
   
6.          var vm = new Vue({
   
7.             el: '#computed_props'+<?=$v['id']?>,
   
8.             data: {
   
9.                kilometers : <?=$v['shop_xjcbl']?>,
   + {4 K& `6 G* m; c# L5 ?
10.                meters: <?=$v['shop_xjcbl']?>,
      X6 j2 A) Q" g
11.                            id:<?=$v['id']?>,
    8 q2 B, W1 j" Z1 U
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    4 b9 d4 A3 i! m0 k7 p
13.             },
    ! `0 l  m: E) a+ [* i/ K- T$ M
14.             methods: {
    
15.                        
    
16.             },
    
17.             computed :{
    & J7 P& I2 y! R7 I* w! z# U
18.             },
    
19.             watch : {
    ) U; I8 {' s- p
20.                kilometers:function(val) {
    " _  R  q4 j, c: B4 F
21.                   this.kilometers = val;
    ( L' k! C6 q. i% \6 S) k% a) K
22.                   this.meters = val ;
    
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    - J: d& m9 U0 W* j) D
24.                },
    * a) l' ^/ E5 \0 \8 U* y/ Y
25.                meters : function (val) {
    
26.                   this.kilometers = val;
    
27.                   this.meters = val;
    ; j6 [5 M+ |  B. Q
28.                }
    / u0 l7 v- F& f# O, S
29.             }
    
30.          });
    3 s0 G% y. b$ D7 l  D7 \
31. 
    4 u9 j( \/ H0 {, D. d- Q
32. 
    
33. </script>

复制代码

, ^4 J: H+ |* e* z8 k% A
4 K# o* I4 o4 B3 Y! g, S