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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-8-6 20:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
php-html
" P, S2 K& {& R4 K8 f: i' v
  1. <div id = "computed_props{$v['id']}">; H. I4 x+ S" }' ^/ o
  2.         <input style="width:50px;"  type = "text" v-model = "kilometers" placeholder="20" >
    9 \3 u' S! l* X& s0 h" l" i/ b
  3.         <a class="btn btn-xs btn-info" style="display:inline-block;"  v-bind:href="url" >修改比例为{{meters}}</a>* ^' `. m( \' I: L! M
  4. </div>
复制代码
vue.js
; x5 c) {& k5 g
  1. <script type = "text/javascript">- l% P3 N& C6 m" j+ v2 V
  2.                 1 |9 c  S# ?. X
  3.                 var ids = <?=$v['id']?>;- S* C* v2 P" z$ T7 M- _
  4.                 var shop_xjcbl = <?=$v['shop_xjcbl']?>;* h% L. W5 m$ r+ D. M
  5.                
    2 O) o! _  f- Y, J# _
  6.          var vm = new Vue({: m' h+ H0 M) g, B8 u5 w2 G" @7 K' h
  7.             el: '#computed_props'+<?=$v['id']?>,
    / U1 R, X' G* K
  8.             data: {$ F5 I2 y' b( d, r2 O3 ?# R0 x
  9.                kilometers : <?=$v['shop_xjcbl']?>,  r( y0 P, n2 L
  10.                meters: <?=$v['shop_xjcbl']?>,
    4 C8 n5 h) n# L
  11.                            id:<?=$v['id']?>,
    8 u2 H' g1 i* }% W: f9 M
  12.                            url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',! z1 e" H+ b. W& I; T# W
  13.             },
    + v% H) _9 h" t$ n& T1 J: ~0 q" L
  14.             methods: {- K* I! V: l( h! F( u. v! M
  15.                         1 Y/ X5 `8 i$ E; }' D( z
  16.             },; [5 U: ?! ~# [! a2 w) X9 Z
  17.             computed :{
    ( A- ?1 s+ q/ a* {" X( c! v- G
  18.             },
    - x8 q$ [1 ]: _. @2 M" r
  19.             watch : {
    ' D' b- Y' ]1 b2 ]' B# Y4 Z% _# q8 n$ ~
  20.                kilometers:function(val) {& _+ n2 g5 \3 o  B" b! o' f
  21.                   this.kilometers = val;! ^! A9 h5 D$ H8 q
  22.                   this.meters = val ;
    # e! n$ t5 F! l/ Z) e. b- R- h
  23.                                   this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';+ Y$ s; A0 v' ?, y
  24.                },# K/ D5 Q$ D/ ]7 I- _
  25.                meters : function (val) {
    6 C# y$ [4 ]8 U  x
  26.                   this.kilometers = val;" K2 y  w3 {) w/ e/ \$ e7 v
  27.                   this.meters = val;2 j6 w' t5 M0 F% T' t4 [
  28.                }
    " m( s0 V+ u# @" b2 P8 y- m
  29.             }
    / ?4 j+ i, Z, \3 C% O2 W: l; }) ^3 R4 M
  30.          });
    2 a  x" n% n. l/ O7 h+ i7 V
  31. 3 H0 Q( n. [2 G% g5 O7 S- y4 P
  32. ' m6 \# D' t( p( i' L
  33. </script>
复制代码
! z8 Q6 m- Q8 ?9 r6 Y% O
, q3 Q4 d" ~0 g! r  F
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-4-30 21:43 , Processed in 0.054127 second(s), 19 queries .

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