cncml手绘网
标题:
实现 tp循环输出el
[打印本页]
作者:
admin
时间:
2018-8-6 20:07
标题:
实现 tp循环输出el
php-html
0 W+ ?5 S. H* X
<div id = "computed_props{$v['id']}">
+ m" s, \$ T4 ?# c+ F, J8 z
<input style="width:50px;" type = "text" v-model = "kilometers" placeholder="20" >
1 z; M% p7 ~, O: N2 ?
<a class="btn btn-xs btn-info" style="display:inline-block;" v-bind:href="url" >修改比例为{{meters}}</a>
( {+ i* E5 u: {" z; n2 L0 O& v' p
</div>
复制代码
vue.js
6 z7 a% \/ L" U& W+ h
<script type = "text/javascript">
8 X# m4 x+ ]1 `! h1 x
3 @: B/ ]) l/ x, o
var ids = <?=$v['id']?>;
7 k7 |6 G7 N' S
var shop_xjcbl = <?=$v['shop_xjcbl']?>;
% t3 ^" n- F4 M6 x( H+ |1 d
" k0 r. y& q- l( h
var vm = new Vue({
! ~$ D6 a! Y, f% b
el: '#computed_props'+<?=$v['id']?>,
9 b! ?" y7 w% L0 c' I! I
data: {
" g x3 K; k/ A+ r" ~! Q
kilometers : <?=$v['shop_xjcbl']?>,
: Q' }0 V, o! o+ j& {
meters: <?=$v['shop_xjcbl']?>,
2 V& U* \5 H# z& A& X
id:<?=$v['id']?>,
8 E2 m2 Q, h* K) l+ c$ n+ v- R
url:'/nc.php?s=/goods/xiugaibili/id/'+ids+'/shop_xjcbl/'+shop_xjcbl+'.html',
) R5 p. u: X, n, V8 w3 ]: I3 E# T
},
3 Y/ @+ W8 R5 p% ^: M9 k
methods: {
/ q+ j& D6 @( w( N+ O( T; w# z9 {, r
( K' {, X7 o/ f. _2 W
},
( |" F7 M! _. ?4 a
computed :{
$ w+ j9 J) T9 c9 K7 C3 N' D8 ~
},
" H) }+ n5 @' @3 Y8 g
watch : {
& n7 Z! T3 B! Y% \9 a' W8 J
kilometers:function(val) {
) |2 |# p" z* N: [7 C$ h* X
this.kilometers = val;
0 a7 _& g/ b0 j( _4 X4 t9 `7 K$ l: S
this.meters = val ;
2 r* m, r4 M1 I3 a" _5 I
this.url = '/nc.php?s=/goods/xiugaibili/id/'+this.id+'/shop_xjcbl/'+this.kilometers+'.html';
1 _8 `5 D3 x* `) t C5 |; K0 r( E
},
. k0 z) G: `7 p! i: g
meters : function (val) {
0 R. d# ~# z8 c. w `
this.kilometers = val;
0 v; `$ |, T- N
this.meters = val;
, S& I" J, V8 Q) M0 W
}
, J& B/ N r; a# J, k+ T2 E. Z
}
% ~" @7 B; H) h" A/ Z/ B
});
" b0 ~/ L5 {3 ?. h: F
; r; b0 a( J7 J; b+ T$ ^
- h3 Q4 _" l# R6 k! v2 p! t' @
</script>
复制代码
. E, a- g P5 {! _) G g* I
# d1 R" a+ V) q: c
欢迎光临 cncml手绘网 (http://bbs.cncml.com/)
Powered by Discuz! X3.2