简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 【Vue】 Vue 计算属性和侦听器属性与实战
Blogger Information
Blog 94
fans 0
comment 0
visits 91874
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】 Vue 计算属性和侦听器属性与实战
可乐随笔
Original
1424 people have browsed it

Vue 计算属性和侦听器属性与实战

1. Vue 计算属性 和 侦听器属性

Vue实例 计算属性 computed:
Vue 侦听器属性 watch:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>计算属性和侦听器属性：本质上就是方法</title>
  8.     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  9.     <style>
  10.         input {
  11.             width: 5em;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="app">
  17.         <p>2数求和</p>
  18.         <input type="number" v-model="a">+
  19.         <input type="number" v-model="b">=
  20.         <!-- 表达式 -->
  21.         <!-- <span>{{a + b}}</span> -->
  22.         <!-- 函数 -->
  23.         <!-- <span>{{ add()}}</span> -->
  24.         <!-- 计算属性（访问器） -->
  25.         <span>{{ sum }}</span>
  26.     </div>
  27.     <script>
  28.         Vue.createApp({
  29.             data() {
  30.                 return {
  31.                     //Vue中需要一个初始值
  32.                     a : 0,
  33.                     b : 0,
  34.                 };
  35.             },
  36.             methods: {
  37.                 // add (){
  38.                 //     return this.a + this.b;
  39.                 // },
  40.             },
  41.             //计算属性（与函数区别：可以缓存结果）
  42.             computed:{
  43.                 sum(){
  44.                     return this.a + this.b;
  45.                 }
  46.             },
  47.             //侦听器
  48.             watch:{
  49.                 sum(curr,prev){
  50.                     //curr:当前值（新），prev:原值（旧）
  51.                     console.log(curr,prev);
  52.                     if(curr >= 20){
  53.                         alert('恭喜，您中奖了！')
  54.                     }
  55.                 }
  56.             }
  57.         }).mount('#app');
  59.     </script>
  60. </body>
  61. </html>

2. Vue 实战1：购物车实自动计算（计算属性与侦听器属性）

总结：Vue实例：数据/方法/钩子函数/计算属性/侦听器 综合应用实战

生命周期钩子函数 mounted()，实例挂载成功后执行

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>实战1：购物车实自动计算</title>
  9.     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  10.     <style>
  11.         input {
  12.             width: 5em;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div id="app">
  19.         <h3>购物车计算</h3>
  20.         <input type="number" v-model="num" min="1">
  21.         <span> &times; </span>
  22.         <span>{{price}}</span>
  23.         <span> = </span>
  24.         <!-- <span>{{ num * price}} 元</span> -->
  25.         <!-- 计算属性 -->
  26.         <span>{{ shouldPay }} 元</span>
  28.         <p>优惠：<span>{{discount}} 元，实付：{{realPay}}</span></p>
  29.     </div>
  30.     <script>
  31.         Vue.createApp({
  32.             data() {
  33.                 return {
  34.                     //数量
  35.                     num: 5,
  36.                     //单价
  37.                     price: 150,
  38.                     //优惠金额
  39.                     discount: 0,
  40.                     //实付
  41.                     realPay: 0,
  42.                     //折扣率
  43.                     disRate: 1,
  44.                 };
  45.             },
  47.             //生命周期钩子函数
  48.             //mounted，实例挂载成功后执行
  49.             mounted() {
  50.                 // 默认：实付 = 应付
  51.                 this.realPay = this.shouldPay;
  52.                 // 优惠
  53.                 this.discount = this.shouldPay - this.realPay;
  54.             },
  56.             //计算属性（与函数区别：可以缓存结果）
  57.             computed: {
  58.                 //应付金额
  59.                 shouldPay(){
  60.                     return this.num * this.price;
  61.                 }
  62.             },
  63.             //侦听器
  64.             watch: {
  65.                 //监听“应付金额”的变化，确定折扣比例和金额
  66.                 shouldPay(curr){
  67.                     //curr:必须；prev:可选
  68.                     // 1. 计算折扣率
  69.                     switch(true){
  70.                         // [2000,5000]:8折
  71.                         // [>=5000]:8折
  72.                         case curr >= 2000 && curr < 5000 : this.disRate = 0.8;
  73.                         break;
  74.                         case curr > 5000 :this.disRate = 0.5;
  75.                     }
  76.                     // 2.计算实付 = 应付 * 折扣率
  77.                     this.realPay = this.shouldPay * this.disRate;
  79.                     // 3.计算优惠金额 = 应付 - 实付
  80.                     this.discount = this.shouldPay - this.realPay;
  81.                 }
  82.             },
  83.         }).mount('#app');
  85.     </script>
  86. </body>
  88. </html>

3. Vue 实战2：智能搜索（关键字过滤）

array.filter(callback):数据过滤器应用实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>实战2：智能搜索</title>
  9.     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app">
  14.         <input type="search" v-model="keywords" placeholder="请输入关键字">
  15.         <ul>
  16.             <li v-for="(lang,key) in matchlangs" :key="key">{{lang}}</li>
  17.             <!-- 下面应该显示的是一个匹配了关键字的结果集：计算属性进行数据过滤 -->
  18.         </ul>
  19.     </div>
  20.     <script>
  21.         Vue.createApp({
  22.             data() {
  23.                 return {
  24.                     //关键字
  25.                     keywords: '',
  26.                     //数据模拟
  27.                     langs: ['html', 'css', 'javascript', 'js', 'php', 'mysql'],
  28.                 };
  29.             },
  30.             //计算属性
  31.             computed: {
  32.                 // 过滤结果
  33.                 matchlangs(){
  34.                     // 1.判断用户是否输入了内容
  35.                     if(this.keywords != ''){
  36.                         // 2.对结果进行过滤
  37.                         // array.filter(callback):返回true的元素数据
  38.                         return this.langs.filter((lang) => {
  39.                             // string.includes(str):查询子串，返回 true/false
  40.                             return lang.includes(this.keywords);
  41.                         });
  42.                     }
  44.                 },
  45.             },
  46.         }).mount('#app');
  48.     </script>
  49. </body>
  51. </html>
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！