文章目录

1. 计算属性
- 1.1 插值语法实现姓名案例
- 1.2 methods实现
- 1.3 计算属性实现
2.监视（侦听）属性
- 2.1 天气案例
- 2.2 利用监听属性
- 2.3 深度监听
- - 2.3.1 监视多级结构中某个属性的变化
  - 2.3.2 监视多级结构中所有属性的变化
- 2.4 监视属性实现姓名案例

1. 计算属性

要实现下面这个功能：当修改姓或者名时，全名也会随之更新。

1.1 插值语法实现姓名案例

姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{firstName}}-{{lastName}}</span>

     new Vue({el:'#root',data:{firstName:'张',lastName:'三'}})

1.2 methods实现

姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{fullName()}}</span>//注意：一定要带括号

     new Vue({el:'#root',data:{firstName:'张',lastName:'三'},methods: {fullName(){return this.firstName + '-' + this.lastName}},})

1.3 计算属性实现

调用计算属性时，不需要加括号，只要函数名就行

**********<span>{{fullName}}</span>**************

姓：<input type="text" v-model="firstName"> <br /><br />
名：<input type="text" v-model="lastName"> <br /><br />
全名：<span>{{fullName}}</span>//注意：此处没有括号

 const vm = new Vue({el: '#root',data: {firstName: '张',lastName: '三',},computed: {fullName: {//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值//get什么时候调用？1.初次读取fullName时（数据有缓存）。2.所依赖的数据发生变化时。get() {// console.log(this) //此处的this是vmreturn this.firstName + '-' + this.lastName},//set什么时候调用? 当fullName被修改时。// set(value) {//     console.log('set', value)//   const arr = value.split('-')//   this.firstName = arr[0]//  this.lastName = arr[1]// }}}})

也可以简写computed:{fullName(){return this.firstName + '-' + this.lastName}}

2.监视（侦听）属性

2.1 天气案例

要实现下面这个功能，当点击按钮时，天气就会切换

<h2>今天天气很{{info}}</h2>//注意：此处没有括号
<button @click="changeWeather">切换天气</button>
注意：@click="changeWeather"可以写成@click="isHot = !isHot"

const vm = new Vue({el:'#root',data:{isHot:true,},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather(){this.isHot = !this.isHot}},})

2.2 利用监听属性

要实现当天气被修改时，控制台会提示修改,可添加一个监听属性

         watch:{isHot:{immediate:true, //初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}//简写isHot(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}

或者是将监听事件写在外面

 vm.$watch('isHot',{immediate:true, //初始化时让handler调用一下handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}})//简写vm.$watch('isHot', function (newValue, oldValue) {//此处用箭头函数的话，this就是windowsconsole.log('isHot被修改了', newValue, oldValue, this)})

2.3 深度监听

2.3.1 监视多级结构中某个属性的变化

     <h3>a的值是:{{numbers.a}}</h3><button @click="numbers.a++">点我让a+1</button>

     data: {numbers: {a: 1,b: 1,}}

     watch: {'numbers.a': {//注意：此处要加引号handler() {console.log('a被改变了')}}}

2.3.2 监视多级结构中所有属性的变化

     watch: {numbers: {deep: true,handler() {console.log('numbers改变了')}}}

2.4 监视属性实现姓名案例

姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{fullName}}</span> <br/><br/>

     const vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三',fullName:'张-三'},watch:{firstName(val){setTimeout(()=>{console.log(this)//此处this是vmthis.fullName = val + '-' + this.lastName},1000);},lastName(val){this.fullName = this.firstName + '-' + val}}})

1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

4.vue基础（三）计算属性-监视（侦听）属性相关推荐

oclick vue 传参函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
Vue的计算属性、侦听属性与过滤器解析
文章目录知识点计算属性计算属性的基本使用计算属性的 setter 和 getter 侦听属性计算属性与侦听属性对比过滤器过滤器使用方法过滤器应用场景综合小练习知识点计算属性计算 ...
Vue.js 计算属性和侦听器
计算属性和侦听器计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
5.Vue 计算属性和侦听器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 5.Vue 计算属性和侦听器 ...
面试题！vue中的计算属性、方法、侦听属性
1.计算属性详细的内容可跳转至vue 计算属性可以使用计算属性来代替在表达式中进行的复杂运算,以便于能够更方便的维护与复用逻辑. 计算属性是在选项对象中使用 computed 字段来定义. 特点: ...
光脚丫思考Vue3与实战：第05章计算属性和侦听器第02节侦听器
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1qUekWio3fpWToT9PiECpEg ...
VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础安装 CDN 下载安装命令行工具(CLI脚手 ...
Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...
Vue基础之计算属性
Vue基础之计算属性定义: 原理: get函数执行时机: 优势: 备注: Demo: 定义: 要用的属性不存在,要通过已有属性计算得来. 原理: 底层借助了Objcet.defineproperty ...
(第二篇)Vue计算属性、侦听器、过滤器
1.计算属性和侦听器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

4.vue基础（三）计算属性-监视（侦听）属性