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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-8-6 20:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
php-html
' @" `. R" W5 m3 ~& I3 c
  1. <div id = "computed_props{$v['id']}">, G! V( S, n- V8 A  h1 ]
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
    8 [5 p1 m0 m* x) Y' z0 ^
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>
    . S1 s1 ^$ s5 Z
  4. </div>
复制代码
vue.js
$ \& [5 `/ a0 M, |2 W% u$ h: |
  1. <script type = "text/javascript">1 x; n! s5 _' O8 `) X: M2 v2 U+ `
  2.                
    8 }: E# \4 L: w9 X" w
  3.                 var ids = <?=$v['id']?>;* [5 S/ ]# A' I" y# P& K) J9 h
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
    - i+ r1 x  f* t4 C6 H: l
  5.                 ! K1 A: i/ ]8 m" v
  6.          var vm = new Vue({
    9 o$ P) {; A. O' w
  7.             el: '#computed_props'+<?=$v['id']?>,! v6 i4 U, t2 \" H6 r* J
  8.             data: {
    " E5 D4 R% U- [; V& `# N
  9.                kilometers : <?=$v['shop_xjcbl']?>,4 u3 Q$ ^1 n9 Q0 ]
  10.                meters: <?=$v['shop_xjcbl']?>,5 m( e; V' c1 P7 F( ~
  11.                            id:<?=$v['id']?>,' Y8 M! _/ C8 X9 m5 m1 T$ E8 i
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',! j7 j, X% t0 c* @- N7 X: K6 N7 z) m% ^) C
  13.             },1 Z5 u( K- ]7 S8 ?+ V( z
  14.             methods: {
    4 F$ p$ m& K3 s$ z" X3 p8 b2 ]
  15.                         & r6 [* n: Z8 g# |. V
  16.             },6 r) T) L/ @$ K$ U9 U. Y# K$ b
  17.             computed :{
    8 d. A: u; G" y; N  k' h
  18.             },
    0 F! J7 F0 @5 B
  19.             watch : {0 z+ L3 x/ h: i1 P9 c( ]( S: {
  20.                kilometers:function(val) {# Q3 s# T) I/ p! g4 a6 o
  21.                   this.kilometers = val;
    ; s2 m- h# e& M/ {6 A
  22.                   this.meters = val ;
      Z+ g7 V8 m. q) w
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';% }5 T. D  Q5 @6 S6 i$ @- x
  24.                },
    ) A* J6 j6 x9 q2 W5 i. M
  25.                meters : function (val) {
    ! o0 P4 C- W$ |3 `* ]* R
  26.                   this.kilometers = val;
    0 A! a1 E% m/ c- L8 ]
  27.                   this.meters = val;$ n" X+ w& {( f5 n6 F7 `
  28.                }. M. ?: _5 k5 M+ W1 M3 C& c
  29.             }2 b! Q5 x) W/ [2 y- j( j! [1 ^
  30.          });0 o  J# v( m! @  z4 |& s) d
  31. # ?7 F+ Y; y! s7 z/ H
  32. 0 o3 z) C7 E2 |2 T3 T* T( ~# j, P5 O
  33. </script>
复制代码

# J+ r2 p% d: L6 m8 P$ \
. i: b+ B# ?' g$ y9 v
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2024-12-23 02:26 , Processed in 0.118771 second(s), 19 queries .

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