实现 tp循环输出el

admin

php-html

1. <div id = "computed_props{$v['id']}">
   4 u; M4 o# M; ^$ u" k& l' h
2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
   ! i' ^5 E+ g* d7 Q! y, l
3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
   . ?& |3 o1 S  @6 v( Q
4. </div>

复制代码

vue.js

1. <script type = "text/javascript">
   9 t# x3 B8 e& T! R0 c
2.                
   
3.                 var ids = <?=$v['id']?>;
   2 U2 B# i3 r/ W! u1 ~
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   5 P  |' N6 \; g4 Q# L
5.                
   
6.          var vm = new Vue({
   3 N3 \& }% u- u& G
7.             el: '#computed_props'+<?=$v['id']?>,
   
8.             data: {
   $ v5 F# f! w- F8 M
9.                kilometers : <?=$v['shop_xjcbl']?>,
   ) @" \+ S- q% P; c
10.                meters: <?=$v['shop_xjcbl']?>,
    / ?" }3 k- Y1 K, {: P, H& j
11.                            id:<?=$v['id']?>,
    ( C% d8 h" M# L) y1 j
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    & ]& m4 g: u, v2 N0 c8 s1 U
13.             },
    
14.             methods: {
    . t) U- @! |) x% t$ r5 m$ }
15.                        
    
16.             },
    , ^1 P2 L- m; f) Y: K& j' U6 l* K
17.             computed :{
    
18.             },
    ) F3 k3 }2 p8 w2 Y( C0 y
19.             watch : {
    , N4 r- `% u0 l' I6 u4 T9 A
20.                kilometers:function(val) {
    
21.                   this.kilometers = val;
    
22.                   this.meters = val ;
    
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    - h! l5 S9 i+ O9 x4 F
24.                },
    2 D% G  U0 C9 ^; K9 ^, b% x
25.                meters : function (val) {
    ; R5 L; V1 y4 `+ F
26.                   this.kilometers = val;
    # `  n% `! C( w7 r
27.                   this.meters = val;
    , Y4 S2 K! ^) g) I- J
28.                }
    
29.             }
      r2 Z( ?. E, P4 C/ ]
30.          });
    
31. 
    
32. 
    
33. </script>

复制代码