实现 tp循环输出el

admin

php-html
' _6 H( R1 N. c3 x4 u+ w9 o

1. <div id = "computed_props{$v['id']}">
   , c5 i& k' C1 M9 g1 ^! ^& h# H
2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
   4 `/ w) ^! g4 @" O! E" M$ t4 Y+ |' a
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">
   , S8 {# J3 g+ F
2.                
   $ [7 [; v$ }1 R3 s1 }% e  H
3.                 var ids = <?=$v['id']?>;
   2 F6 B6 e3 i& }( [
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
     a0 b3 L4 i6 _% n/ U8 c7 ?
5.                
   
6.          var vm = new Vue({
   
7.             el: '#computed_props'+<?=$v['id']?>,
   
8.             data: {
   5 L! s- O  A2 Q& d" W% A
9.                kilometers : <?=$v['shop_xjcbl']?>,
   ( E9 ^3 w: K) P/ T4 ^1 C
10.                meters: <?=$v['shop_xjcbl']?>,
    
11.                            id:<?=$v['id']?>,
    
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    
13.             },
    ( K; a( t0 q2 c9 a$ [; j
14.             methods: {
    - n; W: s0 p+ y8 R
15.                        
    6 i8 M2 `) z2 n2 r$ ~
16.             },
    7 ]  F4 h8 D1 S$ Y5 o- G! O% A0 G
17.             computed :{
    % I* p! l) Z& C+ m4 i+ c; B( @9 _
18.             },
    
19.             watch : {
    
20.                kilometers:function(val) {
    # ~2 q3 y# _! f: h$ Y7 S! ?+ V
21.                   this.kilometers = val;
    
22.                   this.meters = val ;
    6 D' @0 x1 C1 ?- }$ _
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    
24.                },
    , K3 V+ U' M' i  X. S
25.                meters : function (val) {
    
26.                   this.kilometers = val;
    ) O3 }' d( U+ K: m  _; O
27.                   this.meters = val;
    0 }6 G$ h3 r" e5 A6 t  w
28.                }
    " ~% A- T0 H5 w1 P1 E" [
29.             }
    
30.          });
    
31. 
    ) L8 d9 V0 w! l# p  ]5 j) X2 M
32. 
    ' @7 X9 i; |2 K2 c6 _7 A6 @
33. </script>

复制代码

  @) q+ F8 X' \* Q7 x, i- w" p4 H