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

搜索
博主信息
博文 70
粉絲 4
評論 5
訪問量 122153
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
Vue:實例演示,v-if,v-for,v-model,v-bind,v-on,計算屬性和偵聽器屬性
JiaJieChen
原創(chuàng)
1093人瀏覽過

Vue:實例演示,v-if,v-for,v-model,v-bind,v-on,計算屬性和偵聽器屬性

一.實例演示,v-if,v-for,v-model,v-bind,v-on

方法 含義
v-bind 自定義普通屬性，快捷語法是一個”:”號
v-on 事件屬性，快捷語法是一個”@”符
v-model 雙向綁定
v-for v-for : (循環(huán)變量, 索引/鍵) in/of 數組/對象 :key
v-if 條件渲染流程判斷，有單分支和多分支

①v-bind，自定義普通屬性，快捷語法是一個”:”號

代碼塊

  1.    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">  <body>
  2.     <div class="box">
  3.       <!-- v-bind指令，自定義普通屬性，-->
  4.       <p v-bind:style="style1">{{text}}</p>
  5.       <hr />
  6.       <!-- 快捷語法‘：’  -->
  7.       <p :style="style2">{{text}}</p>
  8.     </div>
  9.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  11.     <script>
  12.       new Vue({
  13.         el: ".box",
  14.         data: {
  15.           text: "v-bind指令",
  16.           style1: "color:red",
  17.           style2: "background:blue",
  18.         },
  19.       });
  20.     </script>
  21.   </body

②v-on，事件屬性，快捷語法是一個”@”符

代碼塊

  1.    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  3.     <script>
  4.       new Vue({
  5.         el: ".box",
  6.         data: {
  7.           text: "v-on指令",
  8.         },
  9.         //事件方法
  10.         methods: {
  11.           click1() {
  12.             alert(this.text);
  13.             d;
  14.           },
  15.         },
  16.       });
  17.     </script>

③v-model，雙向綁定

代碼塊

  1.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.     <script>
  3.       new Vue({
  4.         el: ".box",
  5.         data: { data1: "祖國未來可期" },
  6.       });
  7.     </script>

④v-for,列表渲染

代碼塊

  1.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.     <script>
  3.       new Vue({
  4.         el: ".box",
  5.         data: {
  6.           //渲染數組
  7.           item: ["蘋果", "香蕉", "西瓜", "葡萄"],
  8.           //渲染對象
  9.           hobby: { hobby1: "羽毛球", hobby2: "籃球" },
  10.           //渲染對象數組
  11.           user: [
  12.             { id: 1, name: "小張", get: "20" },
  13.             { id: 2, name: "小紅", get: "20" },
  14.             { id: 3, name: "小朱", get: "20" },
  15.           ],
  16.         },
  17.       });
  18.     </script>

⑤v-if,條件渲染

  • 單分支
    • 多分支

      代碼塊

      1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      2. <script>
      3. new Vue({
      4.   el: ".box",
      5.   data() {
      6.     return {
      7.       text: "點擊顯示或者隱藏",
      8.       flase: "true",
      9.       tips: "顯示",
      10.       name: ["大眾會員", "黃金會員", "鉑金會員", "鉆石會員", "非會員"],
      11.       point: 500,
      12.       text: "點擊加積分",
      13.     };
      14.   },
      15. });
      16. </script>

二.計算屬性和偵聽器屬性

方法 含義
鍵盤修飾符 todolist
計算屬性 conputed
偵聽器屬性 watch

①鍵盤修飾符:todolist

代碼塊

  1.  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.     <script>
  3.       new Vue({
  4.         el: ".box",
  5.         data() {
  6.           return {
  7.             list: [],
  8.           };
  9.         },
  10.         methods: {
  11.           submit(ev) {
  12.               //原生判斷鍵盤添加文字
  13.             // if (ev.key === "Enter") {
  14.             //   this.list.unshift(ev.target.value);
  15.             //   ev.target.value = null;
  16.             // }
  17.             //vue 鍵盤修飾符添加文字
  18.             this.list.unshift(ev.target.value);
  19.               ev.target.value = null;
  20.               console.log(ev.key);
  21.           },
  22.         },
  23.       });
  24.     </script>

②計算屬性computed

代碼塊

  1.  <script>
  2.       new Vue({
  3.         el: ".box",
  4.         data() {
  5.           return {
  6.             //雙向綁定sum
  7.             sum: "0",
  8.             //單價是50
  9.             money: 50,
  10.           };
  11.         },
  12.         //計算屬性computed
  13.         computed: {
  14.           amount: {
  15.             //訪問器屬性get
  16.             get() {
  17.               //指當前sum變量*money變量
  18.               return this.sum * this.money;
  19.             },
  20.           },
  21.         },
  22.       });
  23.     </script>

③偵聽器屬性watch

代碼塊

  1. <script>
  2.       new Vue({
  3.         el: ".box",
  4.         data() {
  5.           return {
  6.             //雙向綁定sum
  7.             sum: "0",
  8.             //單價是50
  9.             money: 50,
  10.             res: 0,
  11.             max: 100,
  12.           };
  13.         },
  14.         //偵聽器屬性
  15.         watch: {
  16.           // 是用來監(jiān)聽某一個屬性的值的變化,屬性名要和data字段中的變量名相同
  17.           // 例如,我要監(jiān)聽"num"變量的變化
  18.           // sum(新的值,原來的值)
  19.           sum(newVal, oldVal) {
  20.             this.res = newVal * this.money;
  22.             //監(jiān)聽庫存量
  23.             if (newVal > 20) {
  24.               this.max = newVal;
  25.               alert("庫存不足");
  26.             }
  27.           },
  28.         },
  29.       });
  30.     </script>
批改老師：天蓬老師天蓬老師

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

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

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

    • 登錄PHP中文網，和優(yōu)秀的人一起學習！
    全站2000+教程免費學