您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 14287|回复: 0
打印 上一主题 下一主题

[Vue.js] 实现 tp循环输出el

[复制链接]
跳转到指定楼层
楼主
发表于 2018-8-6 20:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
php-html: G+ o/ \6 y1 Q, ?6 {2 r
  1. <div id = "computed_props{$v['id']}">" ~) ?4 @1 Y% E. j2 x4 N7 w
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
    6 {4 X; }# S* \9 K: R$ v. z  O
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>: b# o, q. k3 p+ B8 T
  4. </div>
复制代码
vue.js
9 l5 l2 k* j: [
  1. <script type = "text/javascript">
    : m: h" d6 }: Y8 e3 P9 Q" S
  2.                 " u. C# i, d8 H  w3 v
  3.                 var ids = <?=$v['id']?>;' k) F/ {) R% f6 i/ Y5 `
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;( y$ t1 h3 W, @
  5.                
    " A7 u9 _9 x; U1 ]9 o9 h4 Z
  6.          var vm = new Vue({
    9 r" I* s/ v9 r* G2 ]& h9 a
  7.             el: '#computed_props'+<?=$v['id']?>,% x# @) Z+ U+ G$ g+ N7 E9 h7 G
  8.             data: {# ?8 t& ~( H" H# Y1 M
  9.                kilometers : <?=$v['shop_xjcbl']?>,
    $ S$ L3 I  g: S, _+ o
  10.                meters: <?=$v['shop_xjcbl']?>,
    " g+ e" D; ^; O; F
  11.                            id:<?=$v['id']?>,
    # S! i( J2 T  v* U* P
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',2 M" s' s- O7 w2 Y2 O4 }/ }5 t
  13.             },
    ; H( X8 P! s' ?& u3 }2 _' ^( t
  14.             methods: {
    ( `( l+ a8 o' z1 O- E# C6 i
  15.                        
    ( W4 {0 J" m" q5 y( I
  16.             },5 w- S7 ?  I& j* g
  17.             computed :{- a7 y1 v9 z' ~% |. p4 v/ Q0 C. w
  18.             },- t% R- m2 x9 |! Z' `
  19.             watch : {5 T. L, F+ C- Z/ M1 L
  20.                kilometers:function(val) {
    0 K' ]* h$ Q- Q% u4 o. _
  21.                   this.kilometers = val;
    $ u; `4 h# y- k' D5 C5 {! u) m
  22.                   this.meters = val ;7 g+ p1 G4 D; j- `& i( a
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    $ j+ I: K) k9 ?- |( M
  24.                },
    : k; c2 y2 v2 W4 H1 k! \
  25.                meters : function (val) {# B9 u/ P7 y5 L* n- I
  26.                   this.kilometers = val;
    0 x, B2 E7 T5 P
  27.                   this.meters = val;5 ?9 S) }; ^& n) T; p0 u
  28.                }
    * V8 F9 M5 d5 T( c- s* M  p7 M& i2 D/ [
  29.             }
    3 m% B. }0 c' o& s# M
  30.          });7 Q6 }! e/ N, @; l

  31. % |1 j  v( J. [6 |5 j9 {4 I3 m% q

  32. : B! [9 A7 d8 a$ W1 a
  33. </script>
复制代码

/ R8 c) l' ]# m! f
5 f6 a0 r& u: B- o8 o8 g; c
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-8-4 11:48 , Processed in 0.049599 second(s), 20 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!