实现 tp循环输出el

admin

php-html

1. <div id = "computed_props{$v['id']}">
   % N) \  y0 Y7 ?+ @
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>
   / U! K8 |# H9 Z% b0 l2 ~
4. </div>

复制代码

vue.js

1. <script type = "text/javascript">
   
2.                
   4 Y! d  d* [/ r3 E& E
3.                 var ids = <?=$v['id']?>;
   
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   " q7 [+ _2 N2 R9 z& T7 f9 \! e0 S+ ~
5.                
   $ S3 h+ C2 @, X& ~1 m
6.          var vm = new Vue({
   
7.             el: '#computed_props'+<?=$v['id']?>,
   % k0 i) y  a! y" T: p# S3 Y9 x
8.             data: {
   6 x2 B" y: E$ }2 o9 p
9.                kilometers : <?=$v['shop_xjcbl']?>,
   
10.                meters: <?=$v['shop_xjcbl']?>,
    4 k! Z" A: o2 l; f: F
11.                            id:<?=$v['id']?>,
    " n9 u+ F) u: |- I) \# W; s
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    + u+ |! o5 a1 x* D6 G7 C7 ?2 @- N
13.             },
    
14.             methods: {
    
15.                        
    - |% l4 w* {; i8 H, O, i( \9 Z
16.             },
    ! c) P" ^8 t$ j( I  G0 O1 I6 U3 Y
17.             computed :{
    
18.             },
    
19.             watch : {
    5 {( }( ^5 Y0 S& r
20.                kilometers:function(val) {
    , q  U& k- ~4 x( ^4 |0 q9 J0 T
21.                   this.kilometers = val;
    0 B' k4 K  n% G6 M( ~
22.                   this.meters = val ;
    
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    
24.                },
    2 L1 a& P% ]3 [5 k* Y) ~  M
25.                meters : function (val) {
    
26.                   this.kilometers = val;
    ! b- D) M6 a5 R) B+ [
27.                   this.meters = val;
    
28.                }
    ; P; D1 M$ o% x, {
29.             }
    ) {: v; I& B0 W) u1 E9 N
30.          });
    
31. 
    7 S# Y, L8 d( w% ]( t+ ]
32. 
    - C! d4 `* ~8 Y' i+ K2 C
33. </script>

复制代码

; }' S5 ]; U( L2 K4 k* a  {; W