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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-8-6 20:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
php-html  W( i8 [: f' r3 O/ _& p0 [
  1. <div id = "computed_props{$v['id']}">& u! Z' ?5 b4 ]' e2 x8 }
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
    3 p- E0 ~( |# y2 ]( Y
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>) v* X' M. ^  ]$ p5 Y- w* F
  4. </div>
复制代码
vue.js
# A# A1 {3 ]1 z$ O
  1. <script type = "text/javascript">
    ; D! {2 D9 _, o. e7 g" r
  2.                
    ' G% b! E- `- N. r* [2 U
  3.                 var ids = <?=$v['id']?>;$ q" c0 B/ r4 |* v0 t# a0 k+ u% d; K
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;, L. l( s4 W$ z, M3 a& D
  5.                
      g! R3 s5 A' D! [2 R) G) E
  6.          var vm = new Vue({, L$ g% P# A4 f! \! Z0 O
  7.             el: '#computed_props'+<?=$v['id']?>,0 W; i* d# r9 {6 i9 p3 H& D
  8.             data: {
    1 l. z) o8 J9 p- p: D$ o
  9.                kilometers : <?=$v['shop_xjcbl']?>,
    $ z5 N- P. |- o9 ?' Q
  10.                meters: <?=$v['shop_xjcbl']?>,
    / F% _: `4 Z) i5 Y! }, ~; k( e5 }
  11.                            id:<?=$v['id']?>,2 X  ?. a5 i9 n: s7 z% l
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',4 o, c+ W+ v5 J) c- J( g
  13.             },
    ; z4 O+ U$ {; @- X+ R1 t# J
  14.             methods: {" b/ I1 y4 O. U) x/ l
  15.                        
    ; m  ?% L5 e5 e% q' e& e% u
  16.             },
    % ^3 g0 g- {2 A. {
  17.             computed :{$ \8 |" i$ T: y$ v5 g9 y. h' J/ T
  18.             },
    2 E/ @) U* v+ J1 J
  19.             watch : {
    : t- m3 L7 O" F
  20.                kilometers:function(val) {
    3 y  ]" y: g0 J
  21.                   this.kilometers = val;& G1 n, O# _- j# O) l( s9 N- w
  22.                   this.meters = val ;. l( I1 s* ?6 ]. b) e1 W
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
      j( i6 L9 l7 s. e
  24.                },/ \1 D. G4 f- w* U8 Z0 m9 ^. T# P; ^
  25.                meters : function (val) {) ]2 A3 B( Z& O& d% z
  26.                   this.kilometers = val;& ^3 R- {  w' U! ~
  27.                   this.meters = val;! C( I# j9 f0 A
  28.                }; z% |) d; `& {' z
  29.             }
    / c; j9 f% L! a+ b
  30.          });% ^. ~* U2 F* Q# R
  31. / \9 J& [  ~& }4 z0 g" f0 D, q) c

  32. 3 w% }* F. g( G  {/ e
  33. </script>
复制代码

; |0 _* q# x( ]1 Z9 }/ e) O
4 W/ h8 b7 W# ^( \+ L  Q+ D
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 18:51 , Processed in 0.055461 second(s), 20 queries .

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