在 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>
运行效果：
