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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-8-6 20:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
php-html
6 e. E5 y) R" }1 C7 Q
  1. <div id = "computed_props{$v['id']}">0 A, Z  D9 d$ F
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
    $ P9 j. z! l, C+ m( `0 d( L6 L
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>* q! H6 U, z. i9 c$ ~7 a0 f
  4. </div>
复制代码
vue.js
6 f# ^# x4 n, V
  1. <script type = "text/javascript">
    0 k4 D' b; @: m5 _8 o; C9 n& f+ }
  2.                
    0 d8 g9 U* e2 z# I4 J
  3.                 var ids = <?=$v['id']?>;
    $ i! m5 E+ R# u; W( W
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;7 J8 u/ ]3 R) `
  5.                 7 W/ b, g) |  y; j$ n9 E- ?' Y+ i
  6.          var vm = new Vue({
    ' `3 X0 y8 F: i: g8 p4 R
  7.             el: '#computed_props'+<?=$v['id']?>,
    0 S/ D9 Y/ J8 }* T# N5 E
  8.             data: {
    0 S  j6 D3 z  J9 W9 w
  9.                kilometers : <?=$v['shop_xjcbl']?>,' \  d" K; n" I) \1 L5 z
  10.                meters: <?=$v['shop_xjcbl']?>,/ ?9 f: ^- e6 x$ `
  11.                            id:<?=$v['id']?>,# t$ r9 r/ V% L/ d/ |- C! w
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
    6 C# t6 o$ y9 p7 k, x3 q
  13.             },6 g1 d  i7 N' T5 H! _5 m6 _
  14.             methods: {
    9 Y5 X* Q. T' l. J6 S; V4 D
  15.                         0 x, h5 x+ g4 d4 l- a9 j' s
  16.             },3 O; k# Q2 i& E  A6 Q: j* K
  17.             computed :{
      ^- o) d) r: K% G
  18.             },
    / Q8 ?5 q! f3 V1 p# H7 _
  19.             watch : {
    : T* H6 w; K+ t! ^) i! A' ^
  20.                kilometers:function(val) {3 L# N2 g2 g& H
  21.                   this.kilometers = val;3 {; N) D$ i7 B* ?; r
  22.                   this.meters = val ;
    8 r5 E) h+ q0 U
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
    1 h  g9 Y' I8 h. r
  24.                },/ h2 t7 H; ?) D5 j8 U& E5 K
  25.                meters : function (val) {  [5 M( p" r- V
  26.                   this.kilometers = val;
    3 m( s$ g5 i7 V) b4 [2 ]
  27.                   this.meters = val;3 f8 _& S9 U% _# L% H4 y
  28.                }
    7 X2 s4 B  M' l1 L. d
  29.             }# t+ _' k* d+ D' H" a2 M# ~
  30.          });. {+ J/ E. }7 C% G
  31. 1 W6 Q" Q9 w; u, [! |
  32. ) e5 U  d* a' K! x6 m) U+ x, F
  33. </script>
复制代码
- ?/ Q! Q6 a9 Z! ?) G
# u  |3 d! ], Q! \& q: c
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-1-30 11:35 , Processed in 0.051359 second(s), 19 queries .

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