vue 基础入门笔记 19:计算属性和侦听属性
333 / 0 / 创建于 4年前 /
September 的个人博客
vue 基础入门笔记 19:计算属性和侦听属性
- 简单介绍
computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；methods方法表示一个具体的操作，主要书写业务逻辑；watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作
- 应用场景
- watch擅长处理的场景：一个数据影响多个数据
- computed擅长处理的场景：一个数据受多个数据影响
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div id="app"> <input v-model="firstName" type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title=""> <input v-model="lastName" type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title=""> <input v-model="fullName" type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title=""> <input v-model="full2Name" type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title=""> </div> <script> var vm=new Vue({ el:'#app', data:{ firstName: "", lastName: '', full2Name:"" }, methods:{}, // 对于任何复杂逻辑，你都应当使用计算属性 computed: { fullName(){ return this.firstName + this.lastName } }, watch: { firstName(){ this.full2Name = this.firstName + this.lastName }, lastName(){ this.full2Name = this.firstName + this.lastName } }, }); Vue.config.devtools = true </script> </body> </html>
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号