cncml手绘网

标题: 实现 tp循环输出el [打印本页]
作者: admin    时间: 2018-8-6 20:07
标题: 实现 tp循环输出el
php-html7 ]9 W9 e- n6 z- f+ Y. z9 E2 y
  1. <div id = "computed_props{$v['id']}">9 Z9 }3 i1 f5 h- f( o) o5 m
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >9 e+ _$ m6 w: |$ F; v2 q# L) Z
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
    ' X/ P7 R! f, Z% A: I) N& I% c
  4. </div>
复制代码
vue.js
( H/ q& X9 }4 o% C
  1. <script type = "text/javascript">
    ' [( n4 D) h+ ?* L
  2.                
    4 H$ S9 Z2 i" V8 U
  3.                 var ids = <?=$v['id']?>;
    + Q1 i- b1 C6 h8 i6 G1 R5 j. f3 }0 a
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
    $ b6 u& i' J7 G7 D* N' K0 F8 [% N
  5.                 ' G# T% T' I" `9 Z" @6 T& w: d
  6.          var vm = new Vue({
    ) Z1 ^! x. ]# n# e- k- M; v
  7.             el: '#computed_props'+<?=$v['id']?>,
    . s1 j1 s5 o2 N' \  ?
  8.             data: {
      o7 x( E8 x, D% B/ P
  9.                kilometers : <?=$v['shop_xjcbl']?>,8 W$ V# K3 X3 b2 E; @! D. M5 d- o
  10.                meters: <?=$v['shop_xjcbl']?>,
    - d4 T& P- |6 i" }
  11.                            id:<?=$v['id']?>,
    1 W7 p& A+ }3 L7 G' A5 e$ n- t
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    0 U! a, A/ c9 ~4 J6 X; |7 s
  13.             },. g5 l3 g* E5 }8 d- s5 c' u( Q: z. D
  14.             methods: {& `& x: D0 Q0 l/ q( z+ c6 I
  15.                        
    ; t2 L& {9 @! y
  16.             },8 I  \! P4 e/ S4 E  o% o4 b1 M% H7 Y
  17.             computed :{
    " `- s; _' Z6 e" a$ @, I6 L
  18.             },! U  l2 e6 o2 @! v, f( f
  19.             watch : {6 ?# d9 q8 I- {3 q; e& u0 L
  20.                kilometers:function(val) {
    0 f; p- Z* V% s& H( y
  21.                   this.kilometers = val;# ]1 }- ?8 n  O; c: |
  22.                   this.meters = val ;, c. F) v- g, N& l$ v6 o* k8 y5 h7 h0 Z
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    4 I/ L# X& y  u8 `% }+ Y0 g, Z
  24.                },! X+ z1 L5 o4 f3 G, W& l
  25.                meters : function (val) {# g. D, y6 {' S: n) d0 l
  26.                   this.kilometers = val;- A# G& w' Y( w/ ^( p
  27.                   this.meters = val;
    * j7 f9 r8 ?3 k( [
  28.                }
    - w9 U( n$ {) |' b- f
  29.             }: |/ H* w7 `' ]. N) g, a2 Q* n
  30.          });
    + E3 r! E$ S- `1 G

  31. ) C: q/ x0 Q& ~& F! K
  32. - k' L, F$ m' d7 Q+ l
  33. </script>
复制代码
( b3 z6 E: X* [- w1 X: M
9 _& M* R  |# I" y$ q1 C" n




欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2