实现 tp循环输出el

admin

php-html
3 T! o' M( u% ~, M3 t" I

1. <div id = "computed_props{$v['id']}">
   # x5 v" L9 H; X  N+ C+ T
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>
   ) C5 P% b' y+ L
4. </div>

复制代码

vue.js

1. <script type = "text/javascript">
   
2.                
   7 ~3 V( I+ Q/ F( C6 _% k) ]8 ?
3.                 var ids = <?=$v['id']?>;
   
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   6 R- B, y7 ]6 j& C9 F3 M- p
5.                
   + _5 |( P- e) R5 Y5 j2 g1 J8 \. A
6.          var vm = new Vue({
   . X! J4 F( f% \0 M5 W) r# q$ n/ U+ c
7.             el: '#computed_props'+<?=$v['id']?>,
   2 }& G, j$ m' o0 m. s9 g
8.             data: {
   
9.                kilometers : <?=$v['shop_xjcbl']?>,
   
10.                meters: <?=$v['shop_xjcbl']?>,
    : O6 W9 z% d* C: U
11.                            id:<?=$v['id']?>,
    6 M: S3 d4 v1 Q
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    2 v$ O  x, i+ f8 M
13.             },
    ; g) J$ [, Y2 c- L& o
14.             methods: {
    ( g' j4 h' w: ^" E4 ^- P1 R3 e
15.                        
    0 t5 O: P3 \8 \. Q
16.             },
    
17.             computed :{
    " T' i* p+ w' \: Z& f$ j( Z# t
18.             },
    & X5 Q3 _, |) e
19.             watch : {
    
20.                kilometers:function(val) {
    , E9 o6 |6 a$ K6 U" k2 H( [
21.                   this.kilometers = val;
    2 J% g+ c7 R" q/ x$ c" H6 W; ?
22.                   this.meters = val ;
    9 n# F4 [! `& a+ f4 H. L% N8 ]! H$ ]
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    ( A2 t' h: H* q% H/ h5 m
24.                },
    
25.                meters : function (val) {
    
26.                   this.kilometers = val;
    ' O! @/ R5 K  X5 Q! ~% C/ h& z) y$ ^, `% l
27.                   this.meters = val;
    
28.                }
    ' O/ m8 c" h+ ?  M! J+ p
29.             }
    
30.          });
    6 y( i; o- W0 L  @/ c
31. 
    
32. 
    
33. </script>

复制代码

5 O# N0 M& t" }# j% b