前端基础-vue（计算属性）

最新推荐文章于 2025-06-24 12:51:45 发布

SmallRed-zhb

最新推荐文章于 2025-06-24 12:51:45 发布

阅读量502

点赞数

CC 4.0 BY-SA版权

分类专栏： IT 前端文章标签： vue 前端框架 vue双向绑定 web前端框架 vue.js

本文链接：https://blog.youkuaiyun.com/qq_41442781/article/details/89677023

IT 同时被 2 个专栏收录

39 篇文章

订阅专栏

前端

35 篇文章

订阅专栏

本文通过一个实例，详细介绍了Vue.js中计算属性(computed)和侦听器(watch)的使用方法，展示了如何利用这两种特性来提高前端应用的性能和响应速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

<button @click="jiayi">加一</button>
<button v-on:click="jianyi">减一</button>
<p>{{value}}</p>
<p>{{bijiao()}}|{{output}}|{{value3}}</p>
</div>
<script src="../js/vue-3.js"></script>
</body>
</html>

js部分

new Vue({
   el:"#app",
   data:{
       value:0,
       value2:'',//声明一个空字符串
       value3:'',
   },
   methods:{
       jiayi:function(){
           this.value++;
           //this.value2=this.value > 4?"大于4":"小于4";
       },
       jianyi:function(){
           this.value--;
           //this.value2=this.value > 4?"大于4":"小于4";
       },
       bijiao:function(){//这个代替掉上面注释掉的那两行，然后在页面中调用这个方法
           return this.value2=this.value > 4?"大于4":"小于4";
       }
   },
   //监听数据的的第一种方式-computed计算属性;
   computed:{//计算属性，在计算属性中函数会考虑页面的变化是否与其中的数据相关，如果页面变化与函数里的变化不想关，就不会执行代码，提高效率
   output:function(){//函数里只有value2发生变化时才会执行,页面可以直接用output调用
           return this.value2=this.value > 4?"大于4":"小于4";
       },
   },
   //监听数据的的第二种方式-watch;侦听器
   watch:{
       value:function(val){//要监听value2这个数据，并把value2的最新值传到第一个参数里
           this.value3=val > 4?"大于4":"小于4";//和computed区别1，不需要返回值
           //区别二，watch可以执行异步事件
           var th=this
           window.setTimeout(function(){//五秒之后让value等于0
               th.value=0;//这里要注意使用外部的this指向
           },5000)
       }
   }
})