您的位置：首页 > 产品设计 > UI/UE

Vue常用指令v-on:click

2017-02-13 15:27 453 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm  = new Vue({
el:'.box',
data:{
arr:['app','orange','pare'],
json:{a:'app',b:'banana',c:'ccc',d:'dog'}
},
methods:{
show:function(){
alert(1);
}
}
});
}
</script>
</head>
<body>
<div class="box">
<ul>
<li v-for='(value,index) in arr'>{{value}} {{index}}</li>
</ul>

<hr />
<ul>
<li v-for='(value,index) in json'>{{value}} {{index}}</li>
</ul>

<hr />
<ul>
<li v-for='(k,v,index) in json'>{{k}} {{v}} {{index}}</li>
</ul>

<hr />
<button type="button" v-on:click='show()'>点击</button>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm  = new Vue({
el:'.box',
data:{
arr:['app','orange','pare'],
},
methods:{
show:function(){
this.arr.push('tomato');
}
}
});
}
</script>
</head>
<body>
<div class="box">
<button type="button" v-on:click='show()'>点击</button>
<hr />
<ul>
<li v-for='(value,index) in arr'>{{value}} {{index}}</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航