在 Vue 中判断条件，咱可以用 v-if，意思就是「如果 xxx 的话，那就 xxx」。当满足条件，也就是条件返回 true 的时候，就可以做它要做的事情了。
案例 1
比如，我们想看一个「大靓仔」，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Vue</title>
<!-- 其实，就一句即实现引入 Vue.js -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!-- 第六步，展示数据 -->
<div id="root"></div>
</body>
<script>
// 第一步，创建一个 Vue 的实例
Vue.createApp({
// 第二步，提供一个 data 选项
// 提供 seen 来保存一个 bool 值
data() {
return {
seen: true
}
},
// 第四步，在 methods 中提供对应方法
methods: {
showAndHide(){
// 切换 bool 值
this.seen = !this.seen
}
},
// 第三步，在页面提供一个标签和一个按钮
// 按钮控制 seen 的值
template:`
<div>
<span v-if="seen">我是一个「大靓仔」^_^</span>
</div>
<p>
<div><button v-on:click="showAndHide">显示/隐藏靓仔</button></div>
`
}).mount('#root');
</script>
</html>
运行效果：
关于「条件判断」先做一个简单的了解，更多实战案例，后面拿更多案例来分析。
我们再来了解一下 Vue 中的「循环」，咱可以用 v-for来循环遍历出数组中的元素 。
案例 2
一个小案例，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Vue</title>
<!-- 其实，就一句即实现引入 Vue.js -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!-- 展示数据 -->
<div id="root"></div>
</body>
<script>
// 第一步，创建一个 Vue 的实例
Vue.createApp({
// 第二步，提供一个 data 选项
// 提供 poetry 数组来保存诗句内容，并返回
data() {
return {
poetry : [
{
text : '红豆生南国，'},
{
text : '春来发几枝。'},
{
text : '愿君多采撷，'},
{
text : '此物最相思。'}
]
}
},
// 第三步，在页面提供一个标签和一个列表
// 其中列表用来展示诗句内容
template:`
<div>
<span>你听过 王维 的《相思》吗？</span>
</div>
<ol>
<li v-for="p in poetry">
{
{ p.text }}
</li>
</ol>
`
}).mount('#root');
</script>
</html>
运行效果：
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。比如，我们来写一个「花名登记册」吧。
案例 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Vue</title>
<!-- 其实，就一句即实现引入 Vue.js -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!-- 展示数据 -->
<div id="root"></div>
</body>
<script>
// 第一步，创建一个 Vue 的实例
Vue.createApp({
// 第二步，提供一个 data 选项
// 提供 userName 用来获取输入的用户名
// 提供 userNameList 数组用来收集所有输入的名字，循环展示
data() {
return {
userName : '',
userNameList:[]
}
},
methods: {
// 第四步，实现 RecordName() 方法，记录用户名
RecordName(){
this.userNameList.push(this.userName);
this.userName = '';
}
},
// 第三步，在页面提供一个输入框、一个按钮和一个列表
// 输入框，用于接受用户输入的用户名，通过 v-model 能将表单输入的用户名与 data 中的 userName 双向绑定
// 按钮，绑定 RecordName() 方法，将用户名保存至 userNameList 数组中，且再将输入框清空
// 列表，用来展示所有用户名
template:`
<div>
请输入用户名：<input v-model="userName" /> ｜
<button v-on:click="RecordName">登记用户名</button>
</div>
<ul>
<li v-for="(name, index) in userNameList">
这是第 {
{ index + 1 }} 名客户，名字是「 {
{ name }}」
</li>
</ul>
`
}).mount('#root');
</script>
</html>
运行效果：
