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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-8-6 20:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
php-html
( V* a% Y8 G1 ?  i7 f, W* t/ X
  1. <div id = "computed_props{$v['id']}">
    + G& A: a" L3 R* R, y" @4 T
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >0 T4 R) b: O8 V! G. k
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>( q; a& ^5 g& |0 Y6 p2 |7 Y
  4. </div>
复制代码
vue.js" |9 R0 i' S0 g; T/ v
  1. <script type = "text/javascript">
    & q' v& R5 X, E9 }/ ^
  2.                
    8 m( x8 B: {4 B
  3.                 var ids = <?=$v['id']?>;* L1 ~% L3 ~* J5 z
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;
    / w' t3 j4 t6 d7 T2 V( e
  5.                 - U, C1 L; X# t9 j( ]
  6.          var vm = new Vue({/ J% q) d  v+ Y7 D8 i
  7.             el: '#computed_props'+<?=$v['id']?>,
    7 w) I6 I9 i" k) J  n- W7 t- u2 _7 v
  8.             data: {
    # e0 J' |3 i4 r. E6 x
  9.                kilometers : <?=$v['shop_xjcbl']?>,
    % V! i- q' Y4 n7 l
  10.                meters: <?=$v['shop_xjcbl']?>,9 R2 q( a$ a4 M3 r8 _& J
  11.                            id:<?=$v['id']?>,- J- a6 Q* ^7 O# ]' L3 ?; r3 a
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',( e0 }1 R( B' ?  d9 @
  13.             },
    ' U" `* m  P4 m6 K
  14.             methods: {% F- k% c% I+ h5 i7 g) G) q- o
  15.                           Y, t- S9 N' ~, X! I4 T
  16.             },# r: u) Y9 L" a9 n3 ~4 j5 i3 _
  17.             computed :{7 A: C+ {8 |+ Y3 o6 ~0 W
  18.             },4 c- O: _9 t. r. B
  19.             watch : {
    4 V' ]* h9 ]. K8 F# H
  20.                kilometers:function(val) {, d) h8 c% [3 V. C: [6 S
  21.                   this.kilometers = val;
    * |% e3 q" V3 f9 |; r; q# N% K
  22.                   this.meters = val ;' A# i1 o' X+ C# K
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';! G5 w- z3 `4 }- f, |+ h
  24.                },: O$ i- `5 r' f4 l* i2 T
  25.                meters : function (val) {
    ( S& \1 J# ]7 H6 z4 u
  26.                   this.kilometers = val;! D2 |& w5 c2 `! u5 I
  27.                   this.meters = val;
    0 I9 S; T* S* v
  28.                }/ N0 W+ Y; j1 Y4 ~/ {& Z
  29.             }
    ! h4 U# s$ _- [5 ?: {( O9 k
  30.          });
    * \& f) Q3 u8 o7 y5 ]

  31. 1 C# m# t' A: |! C3 I; |; x
  32. 6 d6 |! q, W. [7 N& W# N
  33. </script>
复制代码
9 W3 x6 \9 R, a$ i# d- r
* |" G, U( d3 i0 D1 H5 H
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-9-21 03:19 , Processed in 0.054124 second(s), 20 queries .

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