实现 tp循环输出el

admin

php-html
. [% m) b- a' Q5 c6 l& I3 z- X' ^

1. <div id = "computed_props{$v['id']}">
   2 O' ~6 s, {# {5 d
2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
   
3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
   % m: ]8 w0 H9 _* [' z3 y
4. </div>

复制代码

vue.js

1. <script type = "text/javascript">
   - ?0 W5 W1 `" V# g: P
2.                
   , p6 D  V9 ]6 E/ D$ g: w0 p
3.                 var ids = <?=$v['id']?>;
   
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   
5.                
   
6.          var vm = new Vue({
   
7.             el: '#computed_props'+<?=$v['id']?>,
   1 h9 R* S2 Y1 i; J& }0 s* r* F
8.             data: {
     Y9 _8 }' @# Y" o! t0 o
9.                kilometers : <?=$v['shop_xjcbl']?>,
   
10.                meters: <?=$v['shop_xjcbl']?>,
    
11.                            id:<?=$v['id']?>,
    - m9 S8 y" g: B8 e
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    
13.             },
    
14.             methods: {
    8 L! f  {- W+ Y( A" h
15.                        
    
16.             },
    ; R4 U( e  X5 V: W4 W
17.             computed :{
    2 K9 o$ G- c2 |* C
18.             },
    
19.             watch : {
    
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';
    
24.                },
    
25.                meters : function (val) {
    
26.                   this.kilometers = val;
    
27.                   this.meters = val;
    
28.                }
    
29.             }
    3 h7 {- M. y/ x! C8 R; @( a) g
30.          });
    ) k' [4 I& f8 r$ y, h) _9 ~
31. 
    
32. 
    
33. </script>

复制代码

9 Q" g' ]8 [; V# M% T# x
; Z$ l. E% r. E! `. p$ `