实现 tp循环输出el

admin

php-html
& O1 v! W- H  H0 U5 P# @$ b7 ^

1. <div id = "computed_props{$v['id']}">
   
2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
     L# @3 a5 z* R8 K
3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
   4 ?6 O# g& k/ z9 Q
4. </div>

复制代码

vue.js
0 j# P' e  Y" a+ P" J% m

1. <script type = "text/javascript">
   
2.                
   6 G5 x! z2 U, P' j4 k( E- i4 n% \
3.                 var ids = <?=$v['id']?>;
   
4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
   4 C" t5 r+ i- u
5.                
   % C: |, {) [) c: O
6.          var vm = new Vue({
   
7.             el: '#computed_props'+<?=$v['id']?>,
   % b3 d2 X* V7 @' N  w6 N( X
8.             data: {
   $ P  {8 t, O' s- o; T1 j( Y
9.                kilometers : <?=$v['shop_xjcbl']?>,
   
10.                meters: <?=$v['shop_xjcbl']?>,
    $ F6 \" ~0 }) e/ h
11.                            id:<?=$v['id']?>,
    
12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    
13.             },
    ( G) q2 s8 ^6 l' E* ^1 C$ A6 [
14.             methods: {
    + K2 [& k; g& X# Q- G2 J
15.                        
    . A) g4 n. K& d
16.             },
    * I) ~3 e' o$ V& E% j: h) r# G$ P
17.             computed :{
    
18.             },
    1 B2 f  v$ ?# ~' y2 |. I0 m5 y1 u
19.             watch : {
    1 {: Y7 t+ K  A% a7 k# Q
20.                kilometers:function(val) {
    
21.                   this.kilometers = val;
    5 E7 Y% w1 w& D$ T
22.                   this.meters = val ;
    
23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    ; L  K. n6 L" M4 P! s
24.                },
    2 j1 t) v' j, R; m0 e3 _
25.                meters : function (val) {
    
26.                   this.kilometers = val;
    3 L% S8 \/ Q! Z0 C' i! |1 z* a
27.                   this.meters = val;
    
28.                }
    ( `4 w& f* W5 p4 P! H
29.             }
    8 H1 x9 V3 `& l
30.          });
    
31. 
    9 f7 ^2 m+ X( t# v) r% u
32. 
    
33. </script>

复制代码

0 T" T7 d2 y( E4 |: a
! E5 g4 @; i4 I" s) W; W) G