实现 tp循环输出el

admin

php-html

1. <div id = "computed_props{$v['id']}">
   
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>
   6 Y% s7 N* ?0 O9 c$ Q/ c) S
4. </div>

复制代码

vue.js
5 c7 \5 l1 Y! R8 P, m

1. <script type = "text/javascript">
   6 f: `- a# u- D/ f8 ^# S
2.                
   
3.                 var ids = <?=$v['id']?>;
   3 W9 g* D: P% I/ u+ E8 H& S1 y# l" {
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   
5.                
   
6.          var vm = new Vue({
   + m; x1 |. a/ R$ Z. ?3 q0 I
7.             el: '#computed_props'+<?=$v['id']?>,
   1 T* `$ ?0 j% M7 r. ]' x' m
8.             data: {
   
9.                kilometers : <?=$v['shop_xjcbl']?>,
   ' m5 v0 c9 E( H6 ]+ u
10.                meters: <?=$v['shop_xjcbl']?>,
    
11.                            id:<?=$v['id']?>,
    
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    8 @  T" Z; J0 g( g; T& }- G
13.             },
    - }3 ~* ~2 G/ M/ d
14.             methods: {
    0 W& M( F, Q! @2 m
15.                        
    * B6 u. z- _- x/ R
16.             },
    ' k" H$ o/ M1 A! j8 P4 a% f+ h
17.             computed :{
    0 S# [9 h  |  }! N
18.             },
    & H1 N! M, b2 R% x6 Y
19.             watch : {
    , C7 \5 @: a% B, ]
20.                kilometers:function(val) {
    , D5 b1 \5 A7 ?5 o& B7 S0 D
21.                   this.kilometers = val;
    - J, ^3 t* c2 a/ m" d! D3 v
22.                   this.meters = val ;
      ?( W1 G7 B. K" b! A3 i6 a$ M1 Z
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    * L5 H1 F& \" s: B# Q9 u3 U) m
24.                },
    
25.                meters : function (val) {
    
26.                   this.kilometers = val;
    3 F" k% W+ x9 w- ^
27.                   this.meters = val;
    1 ]3 F9 n  \  K" @! _& E0 n
28.                }
    ) z4 u2 q9 q4 ~' J% \) o9 V
29.             }
    
30.          });
    5 W! L; T2 [% G) j
31. 
    + d  I8 q4 u6 d8 {7 D: P: [' |
32. 
    
33. </script>

复制代码