简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 在 vue 中使用条件渲染语句实现 todolist，以及 vue 中的计算属性和侦听器属性介绍
Blogger Information
Blog 29
fans 1
comment 0
visits 35289
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
在 vue 中使用条件渲染语句实现 todolist，以及 vue 中的计算属性和侦听器属性介绍
祥子弟弟
Original
867 people have browsed it

一、vue 中的条件渲染

条件渲染指令v-if，v-show。

v-if 指令: v-if 指令和原生 js 中的 if 语句的功能是一样的，作为条件约束，执行哪些功能。同样有作为单分支和多分支条件的语句。
v-show 指令: v-show 指令和 v-if 指令的功能差不多，区别最大的一点是使用 v-dom 的元素，在 dom 树加载完成之后就会存在，只是显示不显示的问题，而 v-if 语句则不一样，它是根据条件判断，然后再从 vue 中渲染到页面上。v-show 的用处是可以定时的显示一些准备好的东西。好处是比起 v-if 来说，v-show 是本来就存在的 dom 元素，页面不会进行多次的渲染刷新。

实例演示条件渲染

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>条件渲染：v-if,v-show</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  7.   </head>
  8.   <body>
  9.     <div class="app">
  10.       <!-- 单分支结构 -->
  11.       <p v-if="flag">{{msg}}</p>
  12.       <button
  13.         v-text="tips = flag ? '隐藏' : '显示'"
  14.         @click="flag = !flag"
  15.       ></button>
  16.     </div>
  17.     <script>
  18.       // v-if:决定元素是否添加到页面上
  19.       // v-show:元素是否显示出来(元素已经在dom结构中了)
  20.       const vm = new Vue({
  21.         el: ".app",
  22.         data() {
  23.           return {
  24.             msg: "当flag为true的时候我会显示出来",
  25.             flag: true,
  26.           };
  27.         },
  28.       });
  29.     </script>
  30.   </body>
  31. </html>

上述示例演示的是一个简单的由 v-if 指令完成的单分支的条件渲染，默认设置的是 flag=true, 可以看到的是 vue 的挂载点中的<p v-if="flag">{{msg}}</p>，作用是判断 flag 的值，然后选择要不要进行渲染，底下的 button 中的点击事件，给了一个可以改变 flag 的操作。

效果如下

在 html 文档中的显示是这样的

点击之前 dom 结构

点击之后 dom 结构

可以清楚的看到页面中的 dom 变化，所以每一次的 v-if 渲染都是对页面的一次刷新。

使用 v-show 来对页面进行渲染

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>条件渲染：v-if,v-show</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <!-- v-show操作 -->
  12.       <p v-show="status">提前祝大家新年快乐！</p>
  13.       <!-- v-show操作的用处：可以定时的显示一些准备好的东西，比起v-if来说，v-show是本来就存在的dom元素，页面不会进行多次的渲染刷新 -->
  14.     </div>
  15.     <script>
  16.       // v-if:决定元素是否添加到页面上
  17.       // v-show:元素是否显示出来(元素已经在dom结构中了)
  18.       const vm = new Vue({
  19.         el: ".app",
  20.         data() {
  21.           return {
  22.             status: false,
  23.           };
  24.         },
  25.       });
  26.     </script>
  27.   </body>
  28. </html>

可以看到的是当前我设置的是 false 状态，所以在页面中是不显示的可以看下执行结果和 dom 结构

然后再将 status 置为 true 状态，vm.$data.status = true;

可以看到的是，v-show 是在 dom 元素创建之后就存在了，只是显示不显示的决定在你，你可以设置什么时候显示，这样在一些活动倒计时的情况中，就直接可以更换页面，而不显得突兀，也不需要页面刷新。

不过 v-if 的条件渲染功能更加强大，v-show 则是实时性更加的好。

使用条件渲染完成 todolist
todolist，就是一个简单的留言功能

使用 vue 实现时，可以使用很多的事件修饰符和按键修饰符，可以省很多事

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>todolist</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <input type="text" name="" @keyup.enter="show($event)" />
  12.       <ul v-if="list.length">
  13.         <li v-for="(item, index) in list" :key="index" v-text="item"></li>
  14.       </ul>
  15.     </div>
  16.     <script>
  17.       // vue实现
  18.       const vm = new Vue({
  19.         el: ".app",
  20.         data() {
  21.           return {
  22.             list: [],
  23.           };
  24.         },
  25.         methods: {
  26.           show(ev) {
  27.             // console.log(ev.target.value);
  28.             if (ev.target.value.trim().length === 0) {
  29.               alert("输入内容不能为空！");
  30.             } else {
  31.               this.list.unshift(ev.target.value);
  32.               ev.target.value = null;
  33.             }
  34.           },
  35.         },
  36.       });
  38.       // 原生实现
  40.       // // 获取事件
  41.       // const input = document.querySelector('input[type="text"]');
  42.       // const ul = document.querySelector("ul");
  44.       // // 为input添加事件
  45.       // input.onkeyup = (ev) => {
  46.       //   // 查看键盘输入
  47.       //   // console.log(ev.key);
  48.       //   if (ev.key === "Enter") {
  49.       //     // 去掉输入字符串两端的空格，然后判断字符串长度是否为0
  50.       //     if (input.value.trim().length === 0) {
  51.       //       alert("内容不能为空！");
  52.       //     } else {
  53.       //       let str = `<li>${input.value}</li>`;
  54.       //       ul.insertAdjacentHTML("afterbegin", str);
  55.       //       input.value = null;
  56.       //     }
  57.       //   }
  58.       // };
  59.     </script>
  60.   </body>
  61. </html>

在上边的示例中使用了按键修饰符.enter，将它添加在事件的后边，则等同于原生中的if (ev.key === "Enter")条件判断语句

二、计算属性和侦听器属性

计算属性使用 computed 声明，本质上就是访问器属性，最终会和 data 合并，所以不要和 data 中已有属性重名。

示例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>计算属性</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  7.   </head>
  8.   <body>
  9.     <div class="app">
  10.       <p>
  11.         数量：<input type="number" v-model="num" style="width: 5em" min="0" />
  12.       </p>
  13.       <p>单价：{{price}} 元</p>
  14.       <p>金额：{{amount}} 元</p>
  15.     </div>
  16.     <script>
  17.       const vm = new Vue({
  18.         el: ".app",
  19.         data() {
  20.           return {
  21.             num: 0,
  22.             price: 50,
  23.             res: 0,
  24.           };
  25.         },
  27.         // 计算属性，使用computed声明
  28.         computed: {
  29.           //   amount() {
  30.           //     return this.num * this.price;
  31.           //   },
  33.           // 访问器属性有getter和setter
  34.           // 计算属性默认是getter
  35.           amount: {
  36.             get() {
  37.               return this.num * this.price;
  38.             },
  39.             set(value) {
  40.               console.log(value);
  41.             },
  42.           },
  43.         },
  44.       });
  45.       vm.amount = 1100;
  46.     </script>
  47.   </body>
  48. </html>

侦听器属性使用 watch 声明,它侦听的是某一个属性的值的变化，它的属性名与 data 中要监听的属性同名。侦听器属性更加注重的是实时性，但是它没有计算属性灵活.

比如还是上边计算属性的例子，使用侦听器属性实现

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>计算属性</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <!-- <p>
  12.         数量：
  13.         <input
  14.           type="number"
  15.           v-model="num"
  16.           style="width: 5em"
  17.           min="0"
  18.           @change="calc"
  19.         />
  20.       </p>
  21.       <p>单价：{{price}} 元</p>
  22.       <p>金额：{{res}} 元</p> -->
  23.       <p>
  24.         数量：<input type="number" v-model="num" style="width: 5em" min="0" />
  25.       </p>
  26.       <p>单价：{{price}} 元</p>
  27.       <!-- 计算属性，本质上就是访问器属性 -->
  28.       <p>金额：{{res}} 元</p>
  29.     </div>
  30.     <script>
  31.       const vm = new Vue({
  32.         el: ".app",
  33.         data() {
  34.           return {
  35.             num: 0,
  36.             price: 50,
  37.             res: 0,
  38.           };
  39.         },
  40.         // 侦听器属性，使用watch声明
  41.         watch: {
  42.           // 侦听num属性的变化，num中的参数分别是变化的值，变化前的值
  43.           num(newValue, oldValue) {
  44.             // console.log(newValue, oldValue);
  45.             this.res = newValue * this.price;
  46.           },
  47.         },
  48.       });
  49.     </script>
  50.   </body>
  51. </html>

使用侦听器也同样可以完成相同的功能

计算属性是重新生成一个属性，相当于原生 js 中的访问器属性，只是访问和修改是和属性一样的方式，本质上还是一个方法。对于任何复杂逻辑，都应当使用计算属性去声明。侦听器属性的目的是观察和响应 Vue 实例上的数据变动，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！