Vue.js命令组件实际使用示例
- v-model组件
<html>
<head>
<title>v-model组件</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
el: '#itany',
data: {
model: 'v-model',
name: '',
age: 14,
flag: true,
number: [12, 4, 3, 5]
}
});
}
</script>
</head>
<body>
<div id="itany">
<h2>{{model}}</h2>
用户名：<input type="text" v-model="name"> <br>
{{name}} <br>
{{age}} <br>
{{flag}} <br>
{{number}} <br>
</div>
</body>
</html>
- v-for组件
<html>
<head>
<title>v-for组件</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
el: '#itany',
data: {
arr: [25, 45, 65, 78, 61, 64, 45, 98],
user: { id: 1234, name: 'hyui', num: 4321 }
}
});
}
</script>
</head>
<body>
<div id="itany">
<h2>普通循环</h2>
<ul>
<li v-for="value in arr"> {{value}} </li> <br>
<!--Vue2.0是可以循环带有重复数据的集合-->
<li v-for="value in user"> {{value}} </li>
</ul>
<h2>键值循环</h2>
<ul>
<li v-for="(value,key) in arr" :key="key"> {{key}}对应{{value}} </li> <br>
<!--在Vue2.0中键值循环先是value再是key，有重复数据可以为它们绑定唯一的key，更新元素时可重用元素，效率更高-->
<li v-for="(value,key) in user"> {{key}}：{{value}} </li>
</ul>
</div>
</body>
</html>
- v-on组件
<html>
<head>
<title>v-on组件</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
let vm = new Vue({ //实例化
el: '#itany',
data: {
arr: [13, 45, 61, 98, 78] //定义一个数组，Vue中data只能用于存储数据
},
methods: { //这里面写方法
show: function () { //show方法
console.log('show方法'); //在日志中显示
},
add() { //add方法
this.arr.push(233); //在数组arr中添加233，这里一定要用this.arr.push(233)或者vm.arr.push(233)
this.show();
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<!--点击事件-->
<button v-on:clock="show">控制台显示日志</button>
<button v-on:click="add">向数组中添加一个233</button>
<br>
{{arr}}
<hr>
<button v-on:mouseover="show">鼠标经过显示日志</button>
<button v-on:dblclick="show">双击显示日志</button>
</div>
</body>
</html>
- v-if/v-show组件
<html>
<head>
<title>v-show/v-if组件</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
let vm = new Vue({
el: '#itany',
data: {
flag: true
},
methods: {
changecolor() {
this.flag = !this.flag //这个方法每次执行都会给flag取反
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<button v-on:click="changecolor">隐藏/显示</button>
<hr>
<div style="width: 100px; height: 100px; background-color: red" v-show="flag">红色</div>
<!--这个会去掉red和字-->
<div style="width: 100px; height: 100px; background-color: red" v-if="flag">红色</div>
<!--这个会直接去掉div标签-->
</div>
</body>
</html>