实现 tp循环输出el

admin

php-html
+ Z5 b- K3 e* O% Q1 o

1. <div id = "computed_props{$v['id']}">
   
2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
   * Z4 D# Z2 _& ]& i7 p: `
3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
   7 q5 T! L" p2 w, X% ^; o7 a3 `) e
4. </div>

复制代码

vue.js
. ^/ F; S: `' }# C* M

1. <script type = "text/javascript">
   
2.                
   
3.                 var ids = <?=$v['id']?>;
   
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   
5.                
   
6.          var vm = new Vue({
   . Q$ ^3 v( Z4 C, }% h
7.             el: '#computed_props'+<?=$v['id']?>,
   
8.             data: {
   
9.                kilometers : <?=$v['shop_xjcbl']?>,
   4 M% C5 Z1 N% g
10.                meters: <?=$v['shop_xjcbl']?>,
      }* J' ^1 M, y* Y! z
11.                            id:<?=$v['id']?>,
    ) ^9 w2 |1 x' _6 R6 n
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    
13.             },
    7 Q- Y0 v$ c3 _; x
14.             methods: {
    
15.                        
    ; u8 s! G" Y9 u3 k
16.             },
      N* @. N8 o, K7 \; e
17.             computed :{
    & I; Z# w2 ~& \: L' g& X
18.             },
    ! J7 W7 e  `9 A
19.             watch : {
    * O" l' N* c: G" _. k' T3 U
20.                kilometers:function(val) {
    
21.                   this.kilometers = val;
    5 ?  r% a) g" H1 r+ P' @
22.                   this.meters = val ;
    + `9 }9 Z1 C0 x2 U
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    8 l" ]/ M  J. n0 y/ L$ e3 C
24.                },
    
25.                meters : function (val) {
    
26.                   this.kilometers = val;
    4 K" j! J8 c1 `
27.                   this.meters = val;
    4 M. x9 d9 ~# f  t
28.                }
    ( X7 U% B$ |, k% c6 j
29.             }
    
30.          });
    7 }, A) @- f3 b- K' [- C* ]  s
31. 
    
32. 
    " ?" W+ D5 [& w: O
33. </script>

复制代码