实现 tp循环输出el

admin

php-html

1. <div id = "computed_props{$v['id']}">
   
2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
   6 {4 X; }# S* \9 K: R$ v. z  O
3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
   
4. </div>

复制代码

vue.js
9 l5 l2 k* j: [

1. <script type = "text/javascript">
   : m: h" d6 }: Y8 e3 P9 Q" S
2.                
   
3.                 var ids = <?=$v['id']?>;
   
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   
5.                
   " A7 u9 _9 x; U1 ]9 o9 h4 Z
6.          var vm = new Vue({
   9 r" I* s/ v9 r* G2 ]& h9 a
7.             el: '#computed_props'+<?=$v['id']?>,
   
8.             data: {
   
9.                kilometers : <?=$v['shop_xjcbl']?>,
   $ S$ L3 I  g: S, _+ o
10.                meters: <?=$v['shop_xjcbl']?>,
    " g+ e" D; ^; O; F
11.                            id:<?=$v['id']?>,
    # S! i( J2 T  v* U* P
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    
13.             },
    ; H( X8 P! s' ?& u3 }2 _' ^( t
14.             methods: {
    ( `( l+ a8 o' z1 O- E# C6 i
15.                        
    ( W4 {0 J" m" q5 y( I
16.             },
    
17.             computed :{
    
18.             },
    
19.             watch : {
    
20.                kilometers:function(val) {
    0 K' ]* h$ Q- Q% u4 o. _
21.                   this.kilometers = val;
    $ u; `4 h# y- k' D5 C5 {! u) m
22.                   this.meters = val ;
    
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    $ j+ I: K) k9 ?- |( M
24.                },
    : k; c2 y2 v2 W4 H1 k! \
25.                meters : function (val) {
    
26.                   this.kilometers = val;
    0 x, B2 E7 T5 P
27.                   this.meters = val;
    
28.                }
    * V8 F9 M5 d5 T( c- s* M  p7 M& i2 D/ [
29.             }
    3 m% B. }0 c' o& s# M
30.          });
    
31. 
    % |1 j  v( J. [6 |5 j9 {4 I3 m% q
32. 
    : B! [9 A7 d8 a$ W1 a
33. </script>

复制代码

/ R8 c) l' ]# m! f
5 f6 a0 r& u: B- o8 o8 g; c