文件路径:http://bbs.daxiangclass.com/?thread-307.htm
1.v-model双向数据绑定
<input type="text" v-model="msg"/>
2.v-for循环
<div id="box">
<ul>
<li v-for="item in arr">
<span>{item.name}</span>
<span>{item.age}</span>
</li>
</ul>
</div>
<script src="text/JavaScript">
new Vue({
el:"#box",
data(){
return(){
arr:[
{"name":"yifengchun","age":18},
{"name":"yifengchun","age":18},
{"name":"yifengchun","age":18},
{"name":"yifengchun","age":18}
]
}
}
})
</script>
3.v-show 显示与隐藏
<div id="box">
<div style="width:100px;height:100px;border:1px solid red;display:none" v-show="show"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
4.v-on事件
<div id="box">
<button v-on:click="say">按钮</button>
</div>按钮-->
<script>
new Vue({
el: "#box",
data(){
return {}
},
methods: {
say() {
alert(111);
}
}
})
</script>
