cncml手绘网

标题: 实现 tp循环输出el [打印本页]
作者: admin    时间: 2018-8-6 20:07
标题: 实现 tp循环输出el
php-html: }/ h9 E/ G% w. I% Q5 j! i
  1. <div id = "computed_props{$v['id']}">* C1 n( ~2 S* I7 i; n
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" ># J  C6 r# ]! S# J9 V* P
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>; ^; @& M! X( I* n
  4. </div>
复制代码
vue.js
% ?/ Y8 v) n7 P5 ^/ ^1 h# L; V
  1. <script type = "text/javascript">4 h! |* o& G- Y
  2.                
    ( z+ K6 D) y$ C
  3.                 var ids = <?=$v['id']?>;9 ]$ C' [$ @1 Y% _
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;3 c( X) }2 B* v' C& C: A( I2 C
  5.                
    : D: p% c# I) F
  6.          var vm = new Vue({' G6 Z3 p! |2 \
  7.             el: '#computed_props'+<?=$v['id']?>,
    ; `8 W9 t% d& m1 B4 r# g
  8.             data: {
    ( |% H# T7 t7 X9 ?# v1 K1 A3 k
  9.                kilometers : <?=$v['shop_xjcbl']?>,+ F5 n1 ^, y3 m7 M' P) m% O
  10.                meters: <?=$v['shop_xjcbl']?>,
    # s$ s3 h; {! }( M  h0 O4 G
  11.                            id:<?=$v['id']?>,
    % s" K* m! P  h6 Y( r% {
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    & M/ q$ f& O/ N4 Q
  13.             },* a! a3 a& Q" f) s- w! w0 {
  14.             methods: {
    ' T" {0 t. ~# ?6 U
  15.                         / n; \/ p) {4 e  O
  16.             },
    9 S1 B# Z, o3 [
  17.             computed :{
    4 R2 \0 y# K: [4 w/ m' O0 m& H! O: {
  18.             },
    ' g3 U+ X) n9 q8 x) ?% L
  19.             watch : {
    : p5 H) c: ~8 q2 b
  20.                kilometers:function(val) {
    1 {* l' k2 I3 p2 V
  21.                   this.kilometers = val;: r$ }" R6 z2 A5 d) W8 M
  22.                   this.meters = val ;- M# B2 ]! g% |8 s
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    6 s6 U$ D/ U3 h" S
  24.                },! t' d- L. A$ ~
  25.                meters : function (val) {$ p$ E5 w) w1 i. @0 @4 {
  26.                   this.kilometers = val;; k' ]+ {( \  ^7 A: P. Y1 C; n, H( R
  27.                   this.meters = val;$ }1 b+ C: H, v- p" a6 T* g$ n
  28.                }
      p$ b5 a4 W; G
  29.             }: z  o( f0 e% q1 t
  30.          });+ Q% y! m: }$ h; Q' n" r

  31. " M, p9 A8 u9 U+ [6 |
  32. 7 x* L: L+ ^& V- B
  33. </script>
复制代码
) ~1 R/ {8 o" @# w4 M4 O0 Q

+ Q1 ^# T6 z) u0 x1 J



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