cncml手绘网

标题: 实现 tp循环输出el [打印本页]
作者: admin    时间: 2018-8-6 20:07
标题: 实现 tp循环输出el
php-html
# C( f5 o3 ?3 n+ B0 m5 @
  1. <div id = "computed_props{$v['id']}">1 h6 r4 d& s" n" q9 O9 i
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
    6 v) @9 q. X% S/ i8 u: ^
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
    5 s  ^: ^% p- a4 P2 _
  4. </div>
复制代码
vue.js
% D+ q( p; {, A
  1. <script type = "text/javascript">) Q* {/ v# c; |/ Y0 n- [+ E" t
  2.                 $ y& U2 R. \0 J* L1 b: q/ C
  3.                 var ids = <?=$v['id']?>;9 n) A" D3 e8 f% l& p
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;2 ~2 p/ n1 E6 X7 g. a: L
  5.                
    8 [% w' w+ i% h& s
  6.          var vm = new Vue({
    : j' X+ [9 Y  ~' N  K
  7.             el: '#computed_props'+<?=$v['id']?>," j* m, ]  u0 d
  8.             data: {
    5 N  n& e7 A$ n
  9.                kilometers : <?=$v['shop_xjcbl']?>,4 X& c8 j0 C% f) L; x5 s
  10.                meters: <?=$v['shop_xjcbl']?>,4 B4 Q$ O1 z6 t8 V$ Z+ P" @
  11.                            id:<?=$v['id']?>,- x: D0 `4 ?9 J& j
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',6 h; m7 m& z. c& l% V$ o2 A3 X
  13.             },
    , _* i( T8 P8 s) M" z  T6 K% ~
  14.             methods: {* {1 \# p* J* I+ V  ~6 ?0 i
  15.                         0 W# ?3 j/ s; S4 _3 Z+ ?9 r
  16.             },
    7 _; }  ?" i7 Z' D  z, |3 x
  17.             computed :{
    7 K: V+ J. W5 Y
  18.             },
    - {" V2 @* n6 z8 e% ^
  19.             watch : {
    0 X6 h: ~% O5 l# \* |! V6 X
  20.                kilometers:function(val) {
    " _4 V& J0 m: J* K1 y6 u3 j; U' e6 O
  21.                   this.kilometers = val;
    1 J. j0 C2 P, E+ i% i2 Z3 {( b8 z
  22.                   this.meters = val ;
    ; w0 ?9 ~6 o2 Y! ^( Q
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';: o% f2 h4 d& k! R2 a
  24.                }," H& O4 ]  u5 y9 b6 l. g! @3 P
  25.                meters : function (val) {
    6 d$ W% _; r( C" F- f) M1 d: y
  26.                   this.kilometers = val;, ~: i" J! v9 E6 j- L! a
  27.                   this.meters = val;1 {% b4 m% L3 {# m1 G* W
  28.                }
    : [6 a5 [  ^0 ?
  29.             }
    0 z4 {2 j" {2 o- [6 N3 W1 b0 F/ O
  30.          });6 W+ q1 R# R+ J4 z+ G7 j
  31. ! A# ~! y) `0 y8 L

  32. . {: a( {2 U/ o9 w
  33. </script>
复制代码
( s& q1 P5 N* O: D2 T( L1 o5 L8 T- u! T
9 c" ^2 t" e, d2 P  ~, `! u, L




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