v-if的使用
<!DOCTYPE html>
<html>
<head>
<title>css属性选择器</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<template v-if="showEmail">
<span>邮箱：</span>
<input placeholder="请输入邮箱"></input>
</template>
<template v-else>
<span>密码：</span>
<input placeholder="请输入密码"></input>
</template>
<button @click="handleChange">切换</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
showEmail: true,
},
methods: {
handleChange(){
this.showEmail = !this.showEmail;
}
},
})
</script>
</body>
</html>
v-for的使用
<!DOCTYPE html>
<html>
<head>
<title>css属性选择器</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<ul>
<li v-for="book in books">{{ book.name }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
showEmail: true,
books: [
{name: "《a》"},
{name: "《b》"},
{name: "《c》"},
]
},
methods: {
handleChange(){
this.showEmail = !this.showEmail;
}
},
})
</script>
</body>
</html>
数据绑定：数据与视图绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<ul>
<li v-for="book in books"> {{ book.name }} </li>
</ul>
<button @click="handleAdd">add</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{name: "《a》"},
{name: "《b》"},
],
},
methods: {
handleAdd(){
this.books.push({name: "《c》"});
}
}
});
</script>
</body>
</html>