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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-8-6 20:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
php-html9 M3 C+ K' s! |/ u  M* O! H
  1. <div id = "computed_props{$v['id']}">& ^9 E! A' A5 ]/ F6 X
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
    7 T+ l+ l; z  \( ?  @4 `
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>) A3 A7 B0 K! ?+ b4 J
  4. </div>
复制代码
vue.js! h+ f. Z6 Y8 O8 i& [+ F0 e* b
  1. <script type = "text/javascript">
    7 s8 ?3 Q; z# S7 Z) n- G$ _
  2.                 5 B) z3 v' R0 r/ ?
  3.                 var ids = <?=$v['id']?>;
    # E+ O2 P7 _$ e- _8 J( W, m
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;" e9 _% G) T# a: n$ j! @
  5.                 % I( x, C& u5 r( |
  6.          var vm = new Vue({
    6 h/ n4 p' ?' z
  7.             el: '#computed_props'+<?=$v['id']?>,
    6 a; n& ]2 W: I) K$ ]+ Y# d
  8.             data: {
    2 U( @1 F+ O4 x3 j5 V" I
  9.                kilometers : <?=$v['shop_xjcbl']?>,
    8 Z+ O. ]  `# Q' e1 n
  10.                meters: <?=$v['shop_xjcbl']?>,
    % f0 z) ^1 l7 R4 q7 C4 t$ ?
  11.                            id:<?=$v['id']?>,# y, h4 d7 }$ I% T' |4 H$ {
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',, N$ f2 ?2 G$ x8 r; z
  13.             },, n  }; x/ n7 K
  14.             methods: {1 I; F: |& W& k  f
  15.                        
    3 o! |0 }5 N& D7 s% `1 m: O
  16.             },2 p- a$ W# @" p5 z
  17.             computed :{0 e: d2 ~' {$ F) z
  18.             },
    $ f; [. \0 H) K1 R
  19.             watch : {
    / h1 {' ^) w: B% w  c/ f; K/ w
  20.                kilometers:function(val) {
    ' n. R5 u) n1 g- f
  21.                   this.kilometers = val;: J$ f/ r! e9 z- F- ?2 j
  22.                   this.meters = val ;3 _7 i; N- H, B' u6 f
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    6 g! ~$ d) \9 P3 Y5 I
  24.                },& i5 V. Z1 }" A! }: z3 P( h. p
  25.                meters : function (val) {. [+ K+ G; Z0 P* ]
  26.                   this.kilometers = val;! l# p( `9 }) x& H, R% F+ `3 J' d7 A
  27.                   this.meters = val;( F$ V9 ~+ c8 K$ M6 o
  28.                }
    " J. A& R* X1 G8 O9 L7 j
  29.             }
    5 j( m7 L5 r3 O4 P1 V( \! N" e( S- V
  30.          });4 m: }; ?/ ^" o- N2 x
  31. / O8 {& v( o+ Q/ S4 P1 x
  32. ! ~1 O+ K; |4 i( w+ |% U4 a
  33. </script>
复制代码

/ w. Y  W8 X. z$ ?
" p- i% G9 w& A+ U
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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