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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-8-6 20:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
php-html% m- E7 P# l. f4 R! I: n8 n
  1. <div id = "computed_props{$v['id']}">% V: d. H( g! E$ _# s" q
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
    ! j; D' r' S7 _7 Z
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>* N- X2 K; Z. c# c2 v
  4. </div>
复制代码
vue.js
; h! x+ x, e6 k* Z' w: ^0 Z
  1. <script type = "text/javascript">* e" j6 A' h+ u7 {9 V
  2.                 8 N8 K; F- K2 ?' G. T6 \  D
  3.                 var ids = <?=$v['id']?>;8 o, y' A  ^4 B' ]( L( M1 C8 Z
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;) g2 k2 a1 I* Q' `1 J
  5.                 % o5 U5 M; f& ]/ d* Z& ^
  6.          var vm = new Vue({3 N4 u# n" D# u) H
  7.             el: '#computed_props'+<?=$v['id']?>,
    9 ]' V$ P8 U# M4 i3 k- `
  8.             data: {
    # M0 f9 C) _5 P/ U' ~. u' ?6 E5 G
  9.                kilometers : <?=$v['shop_xjcbl']?>,+ p; V' c1 @% n
  10.                meters: <?=$v['shop_xjcbl']?>,
    5 ^& i2 M0 ~7 }( M  e
  11.                            id:<?=$v['id']?>,
    : L0 B' ]* c& i
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    & Q. s0 ]3 Z1 P8 y+ s! s
  13.             },! c  y- Z+ p4 l6 Q: m) z
  14.             methods: {
    . h, }/ v9 }/ m4 h, q5 i: B+ s
  15.                        
    2 I  Z0 ~$ Y% }  _8 l
  16.             },  n$ e% I) q7 H
  17.             computed :{6 l) y/ ^" J  h+ |- Z
  18.             },
    % s* m5 y/ i' m& n# X8 l1 b
  19.             watch : {4 g. w6 b0 |' k. g9 I- \& l
  20.                kilometers:function(val) {9 l! O$ J: o9 X4 b; W. F9 P
  21.                   this.kilometers = val;1 I, |( B' I" h  k; O: ]  |
  22.                   this.meters = val ;
    # }# M! x5 V; V, O) g# K& K1 s
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';" ?4 L3 P+ N/ o1 z/ n
  24.                },  V  c4 G9 N" d/ ?: i+ G
  25.                meters : function (val) {% f5 F1 Z; [! K# I7 y( z$ f# |# p
  26.                   this.kilometers = val;
    ) u( Y/ T0 G2 _0 ~& @  w+ W
  27.                   this.meters = val;3 }5 ]3 r% d* U' F: L3 s8 d% p$ t
  28.                }
    7 g5 C$ j6 t/ C$ B% C
  29.             }
    5 q' ]6 X3 {8 s9 N. v  c+ }
  30.          });- u+ G3 p2 J5 g% {* }

  31. # U6 m9 {* R% N
  32. $ T9 t, ?3 f8 f
  33. </script>
复制代码

. _; B8 R, }  {3 A" \: g0 y% w# B4 D1 t( F
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-7-19 16:58 , Processed in 0.059659 second(s), 19 queries .

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