实现 tp循环输出el

admin

php-html
- U  P7 `! Y, {3 C7 x0 [5 m+ W

1. <div id = "computed_props{$v['id']}">
   
2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
   9 F4 l8 m6 i/ [5 \- o
3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
   " b& j. V0 N. T) `4 y, ]
4. </div>

复制代码

vue.js

1. <script type = "text/javascript">
   
2.                
   
3.                 var ids = <?=$v['id']?>;
   
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   
5.                
     o& P$ o. b% J) t0 f+ J3 ]! c
6.          var vm = new Vue({
   9 k8 n  Y& D9 `: Y
7.             el: '#computed_props'+<?=$v['id']?>,
   
8.             data: {
   1 T8 u4 Z' ]% x4 f
9.                kilometers : <?=$v['shop_xjcbl']?>,
   
10.                meters: <?=$v['shop_xjcbl']?>,
    
11.                            id:<?=$v['id']?>,
    / C, ^. K2 l; P# v( l6 T- _3 Q
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    
13.             },
    
14.             methods: {
    3 Y7 f' _2 Q+ e2 y  w$ [! @) M& @
15.                        
    
16.             },
    2 x9 o  H9 N8 H( q
17.             computed :{
    / u. [# x) E* j8 w9 u; K& S
18.             },
    
19.             watch : {
    6 S# o! R# ?3 }6 G' O
20.                kilometers:function(val) {
    " P  q9 I2 @- e: M; x
21.                   this.kilometers = val;
    8 u. K' V( D; l* f# q+ B5 k
22.                   this.meters = val ;
    
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    
24.                },
    8 g& R- x2 x# p6 c7 L6 U
25.                meters : function (val) {
    
26.                   this.kilometers = val;
    
27.                   this.meters = val;
    
28.                }
    ( r/ I- K$ o, R' y4 @8 H
29.             }
      C4 P& H$ y  B
30.          });
    5 Q( X; q! b6 Y
31. 
      l3 m5 ^) G& j& K& q
32. 
    + [9 i5 Y* T  D9 T
33. </script>

复制代码

! |" T) F4 W# _' E% }1 }: v+ P/ I4 x. [
6 T  ^/ n* T$ Q+ p7 x/ r1 T