cncml手绘网

标题: 实现 tp循环输出el [打印本页]
作者: admin    时间: 2018-8-6 20:07
标题: 实现 tp循环输出el
php-html
3 e! {3 U' q$ J$ B
  1. <div id = "computed_props{$v['id']}">0 W8 G  I. Q% D7 ^
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
    & N+ e  R+ x* m: i! c* y7 ]' f$ U3 M, o
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>. e( o- ^. f: [
  4. </div>
复制代码
vue.js
3 e. |$ E/ O; m4 z: ~. L, F
  1. <script type = "text/javascript">& n" r/ G* j* g  }! f( l
  2.                 3 l& V1 D8 Z. l' h. {
  3.                 var ids = <?=$v['id']?>;+ J6 ?& @) |* F9 \- r5 p, r
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;) i% b( G7 a4 [1 M/ G7 \2 z, h
  5.                
    ! H2 N7 N, B- q- |/ A9 |
  6.          var vm = new Vue({& P6 d& H; \& k
  7.             el: '#computed_props'+<?=$v['id']?>,6 P: G9 H% [6 j! `' H% x
  8.             data: {
    $ ?1 Q, N; f, b% Q
  9.                kilometers : <?=$v['shop_xjcbl']?>,
    # Q9 G$ `$ G. \/ g" G' R! \0 A
  10.                meters: <?=$v['shop_xjcbl']?>,
    ! B9 `4 W$ A/ v4 O: ]& D
  11.                            id:<?=$v['id']?>,
    # D9 B( q9 K; F" S' @
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    0 S" b) b1 e" U" X, s4 {. d
  13.             },9 G' S3 Z' N3 F; W9 x: M
  14.             methods: {
    * Q3 S$ {7 ~, m1 ?3 w
  15.                         1 r5 d  @# N7 o' D4 B; m4 n  W
  16.             },* H' m8 _' }) M- j1 V/ G2 p; G" ]
  17.             computed :{
    7 O; X% x' O3 x  d3 W% r- R8 y
  18.             },
    ' t: f% Z0 i: v' y. Q* f! p) A: ~. s
  19.             watch : {
    # X( ~" A! d0 V5 Z' G5 a
  20.                kilometers:function(val) {
    * J  |# k- ?, @- z0 s; r) J
  21.                   this.kilometers = val;
    4 @* ~5 J4 H/ N5 b& R9 Z5 ]
  22.                   this.meters = val ;, K5 _3 s( w4 d$ v  {
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';  a9 e0 v5 O: z9 X
  24.                },# m- e% K, j0 o1 _' O/ S" V
  25.                meters : function (val) {
    3 A+ B2 T6 W. F3 M3 c! {
  26.                   this.kilometers = val;8 S- y* t! O9 {8 U0 K
  27.                   this.meters = val;% A7 b; s) T8 J  x" d
  28.                }
      z0 p: u( e$ a8 D& S1 u- G
  29.             }3 Q% V4 g6 {+ ?2 Z: U4 W
  30.          });* U7 E3 n) D6 F  U
  31. 8 I5 O( ?4 M7 Y9 R

  32. % T3 l- y& ^; k) N9 w+ t
  33. </script>
复制代码

4 s! Q5 q: t# T" B' v! J4 r6 w0 T
, F" m" O' y9 u' k/ f( n' Y6 N' l



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