实现 tp循环输出el

admin

php-html

1. <div id = "computed_props{$v['id']}">
   ) `8 v; O1 H# i6 W6 s
2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
   $ W% J% }' ]& Y& \- g
3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
   6 B1 r, q; @% r9 u1 _; T( S% `
4. </div>

复制代码

vue.js

1. <script type = "text/javascript">
   
2.                
   
3.                 var ids = <?=$v['id']?>;
   + V2 Y, E4 o( c! W
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   6 {& {9 M4 |9 [( v
5.                
   
6.          var vm = new Vue({
   
7.             el: '#computed_props'+<?=$v['id']?>,
   8 \5 U' W8 w5 _/ m
8.             data: {
   
9.                kilometers : <?=$v['shop_xjcbl']?>,
   
10.                meters: <?=$v['shop_xjcbl']?>,
    
11.                            id:<?=$v['id']?>,
    
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    
13.             },
    8 @+ |5 S$ l4 s8 h) Y4 ]" ^0 s
14.             methods: {
    
15.                        
    
16.             },
    
17.             computed :{
    
18.             },
    9 L8 t1 ^! s! B# D3 V
19.             watch : {
    5 Q$ V2 Z2 a2 l: w/ q4 H
20.                kilometers:function(val) {
    ' e/ C  [4 f5 E; m; V5 T
21.                   this.kilometers = val;
    
22.                   this.meters = val ;
    5 q  U$ l1 |+ J6 y, `6 Z
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    
24.                },
    ' w6 L- B  w* A, x% b( ~) i" k
25.                meters : function (val) {
    / E' `0 f! X6 ?5 i' e8 q4 e- u
26.                   this.kilometers = val;
    / _( p$ `! t: K% X2 I; S8 o' z
27.                   this.meters = val;
    0 r8 n: }- ~3 C+ U
28.                }
    7 }! E- L# d& @/ |! ?6 p% h
29.             }
    3 {6 [4 b- U, j6 e
30.          });
    
31. 
    
32. 
    
33. </script>

复制代码

1 F. ~  Y8 a" w; Q
9 r$ Q8 x: ^; u* p! N, Q9 I  ?