亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 29
粉絲 1
評(píng)論 0
訪問(wèn)量 43596
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
在 vue 中使用條件渲染語(yǔ)句實(shí)現(xiàn) todolist，以及 vue 中的計(jì)算屬性和偵聽(tīng)器屬性介紹
祥子弟弟
原創(chuàng)
1078人瀏覽過(guò)

一、vue 中的條件渲染

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

v-if 指令: v-if 指令和原生 js 中的 if 語(yǔ)句的功能是一樣的，作為條件約束，執(zhí)行哪些功能。同樣有作為單分支和多分支條件的語(yǔ)句。
v-show 指令: v-show 指令和 v-if 指令的功能差不多，區(qū)別最大的一點(diǎn)是使用 v-dom 的元素，在 dom 樹(shù)加載完成之后就會(huì)存在，只是顯示不顯示的問(wèn)題，而 v-if 語(yǔ)句則不一樣，它是根據(jù)條件判斷，然后再?gòu)?vue 中渲染到頁(yè)面上。v-show 的用處是可以定時(shí)的顯示一些準(zhǔn)備好的東西。好處是比起 v-if 來(lái)說(shuō)，v-show 是本來(lái)就存在的 dom 元素，頁(yè)面不會(huì)進(jìn)行多次的渲染刷新。

實(shí)例演示條件渲染

  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.       <!-- 單分支結(jié)構(gòu) -->
  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:決定元素是否添加到頁(yè)面上
  19.       // v-show:元素是否顯示出來(lái)(元素已經(jīng)在dom結(jié)構(gòu)中了)
  20.       const vm = new Vue({
  21.         el: ".app",
  22.         data() {
  23.           return {
  24.             msg: "當(dāng)flag為true的時(shí)候我會(huì)顯示出來(lái)",
  25.             flag: true,
  26.           };
  27.         },
  28.       });
  29.     </script>
  30.   </body>
  31. </html>

上述示例演示的是一個(gè)簡(jiǎn)單的由 v-if 指令完成的單分支的條件渲染，默認(rèn)設(shè)置的是 flag=true, 可以看到的是 vue 的掛載點(diǎn)中的<p v-if="flag">{{msg}}</p>，作用是判斷 flag 的值，然后選擇要不要進(jìn)行渲染，底下的 button 中的點(diǎn)擊事件，給了一個(gè)可以改變 flag 的操作。

效果如下

在 html 文檔中的顯示是這樣的

點(diǎn)擊之前 dom 結(jié)構(gòu)

點(diǎn)擊之后 dom 結(jié)構(gòu)

可以清楚的看到頁(yè)面中的 dom 變化，所以每一次的 v-if 渲染都是對(duì)頁(yè)面的一次刷新。

使用 v-show 來(lái)對(duì)頁(yè)面進(jìn)行渲染

  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">提前祝大家新年快樂(lè)！</p>
  13.       <!-- v-show操作的用處：可以定時(shí)的顯示一些準(zhǔn)備好的東西，比起v-if來(lái)說(shuō)，v-show是本來(lái)就存在的dom元素，頁(yè)面不會(huì)進(jìn)行多次的渲染刷新 -->
  14.     </div>
  15.     <script>
  16.       // v-if:決定元素是否添加到頁(yè)面上
  17.       // v-show:元素是否顯示出來(lái)(元素已經(jīng)在dom結(jié)構(gòu)中了)
  18.       const vm = new Vue({
  19.         el: ".app",
  20.         data() {
  21.           return {
  22.             status: false,
  23.           };
  24.         },
  25.       });
  26.     </script>
  27.   </body>
  28. </html>

可以看到的是當(dāng)前我設(shè)置的是 false 狀態(tài)，所以在頁(yè)面中是不顯示的可以看下執(zhí)行結(jié)果和 dom 結(jié)構(gòu)

然后再將 status 置為 true 狀態(tài)，vm.$data.status = true;

可以看到的是，v-show 是在 dom 元素創(chuàng)建之后就存在了，只是顯示不顯示的決定在你，你可以設(shè)置什么時(shí)候顯示，這樣在一些活動(dòng)倒計(jì)時(shí)的情況中，就直接可以更換頁(yè)面，而不顯得突兀，也不需要頁(yè)面刷新。

不過(guò) v-if 的條件渲染功能更加強(qiáng)大，v-show 則是實(shí)時(shí)性更加的好。

使用條件渲染完成 todolist
todolist，就是一個(gè)簡(jiǎn)單的留言功能

使用 vue 實(shí)現(xiàn)時(shí)，可以使用很多的事件修飾符和按鍵修飾符，可以省很多事

  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實(shí)現(xiàn)
  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("輸入內(nèi)容不能為空！");
  30.             } else {
  31.               this.list.unshift(ev.target.value);
  32.               ev.target.value = null;
  33.             }
  34.           },
  35.         },
  36.       });
  38.       // 原生實(shí)現(xiàn)
  40.       // // 獲取事件
  41.       // const input = document.querySelector('input[type="text"]');
  42.       // const ul = document.querySelector("ul");
  44.       // // 為input添加事件
  45.       // input.onkeyup = (ev) => {
  46.       //   // 查看鍵盤(pán)輸入
  47.       //   // console.log(ev.key);
  48.       //   if (ev.key === "Enter") {
  49.       //     // 去掉輸入字符串兩端的空格，然后判斷字符串長(zhǎng)度是否為0
  50.       //     if (input.value.trim().length === 0) {
  51.       //       alert("內(nèi)容不能為空！");
  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")條件判斷語(yǔ)句

二、計(jì)算屬性和偵聽(tīng)器屬性

計(jì)算屬性使用 computed 聲明，本質(zhì)上就是訪問(wèn)器屬性，最終會(huì)和 data 合并，所以不要和 data 中已有屬性重名。

示例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>計(jì)算屬性</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.         數(shù)量：<input type="number" v-model="num" style="width: 5em" min="0" />
  12.       </p>
  13.       <p>單價(jià)：{{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.         // 計(jì)算屬性，使用computed聲明
  28.         computed: {
  29.           //   amount() {
  30.           //     return this.num * this.price;
  31.           //   },
  33.           // 訪問(wèn)器屬性有g(shù)etter和setter
  34.           // 計(jì)算屬性默認(rèn)是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>

偵聽(tīng)器屬性使用 watch 聲明,它偵聽(tīng)的是某一個(gè)屬性的值的變化，它的屬性名與 data 中要監(jiān)聽(tīng)的屬性同名。偵聽(tīng)器屬性更加注重的是實(shí)時(shí)性，但是它沒(méi)有計(jì)算屬性靈活.

比如還是上邊計(jì)算屬性的例子，使用偵聽(tīng)器屬性實(shí)現(xiàn)

  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>計(jì)算屬性</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.         數(shù)量：
  13.         <input
  14.           type="number"
  15.           v-model="num"
  16.           style="width: 5em"
  17.           min="0"
  18.           @change="calc"
  19.         />
  20.       </p>
  21.       <p>單價(jià)：{{price}} 元</p>
  22.       <p>金額：{{res}} 元</p> -->
  23.       <p>
  24.         數(shù)量：<input type="number" v-model="num" style="width: 5em" min="0" />
  25.       </p>
  26.       <p>單價(jià)：{{price}} 元</p>
  27.       <!-- 計(jì)算屬性，本質(zhì)上就是訪問(wèn)器屬性 -->
  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.         // 偵聽(tīng)器屬性，使用watch聲明
  41.         watch: {
  42.           // 偵聽(tīng)num屬性的變化，num中的參數(shù)分別是變化的值，變化前的值
  43.           num(newValue, oldValue) {
  44.             // console.log(newValue, oldValue);
  45.             this.res = newValue * this.price;
  46.           },
  47.         },
  48.       });
  49.     </script>
  50.   </body>
  51. </html>

使用偵聽(tīng)器也同樣可以完成相同的功能

計(jì)算屬性是重新生成一個(gè)屬性，相當(dāng)于原生 js 中的訪問(wèn)器屬性，只是訪問(wèn)和修改是和屬性一樣的方式，本質(zhì)上還是一個(gè)方法。對(duì)于任何復(fù)雜邏輯，都應(yīng)當(dāng)使用計(jì)算屬性去聲明。偵聽(tīng)器屬性的目的是觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)，當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷較大的操作時(shí)，這個(gè)方式是最有用的。

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)