浅谈vue中的计算属性和侦听属性
计算属性
计算属性用于处理复杂的业务逻辑
计算属性具有依赖性，计算属性依赖 data中的初始值，只有当初始值改变的时候，计算属性才会再次计算
计算属性一般书写为一个函数，返回了一个值，这个值具有依赖性，只有依赖的那个值发生改变，他才会重新计算
<!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>表单输入绑定</title>
</head>
<body>
<div id="app"> {{ reverseMsg }}---- {{ reverseMsg }}-------- {{ reverseMsg }} //直接使用计算属性中的函数就是所要的数据 </div>
</body>
<script src="vue.js"></script> //vue的js，不然使用不了vue语法
<script>
const app = new Vue({
el: '#app',
data: {
msg: 'hello world'
},
computed: {
reverseMsg () { // 计算属性是一个函数，返回一个值，使用和data中的选项一样
console.log('computed') // 执行1次 --- 依赖性
return this.msg.split('').reverse().join('');
}
}
})
</script>
</html>
侦听属性(监听属性)
vue提供了检测数据变化的一个属性 watch 可以通过 newVal 获取变化之后的值
<!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>表单输入绑定</title>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = {{ fullname }} </div>
</body>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstname: '李',
lastname: '小龙',
fullname: '李小龙'
},
watch: { // 侦听属性
firstname (newVal, oldVal) { // newVal变化之后的值
this.fullname = newVal + this.lastname // 当改变 姓 的时候执行
},
lastname (newVal, oldVal) {
this.fullname = this.firstname + newVal // 当改变 名字 的时候执行
}
}
})
</script>
</html>
浅谈vue中的计算属性和侦听属性的更多相关文章
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- VUE 计算属性 vs 侦听属性
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...
- 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...
- vue计算属性VS侦听属性
原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- Vue-计算属性和侦听属性
复杂逻辑应使用计算属性而不应写在插值表达式{{ }}里 <div id="app"> 原值:{{ msg }} <br> 翻转后的值:{{ reverseM ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- 浅谈Vue中的Prop
Prop 基本用法 Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component('child', { ... // 接收message p ...
- 浅谈Vue中Slot以及slot-scope
vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...
随机推荐
- C# -- 多线程向同一文件写入
1. 多线程向同一文件写入Log. public delegate void AsyncLog(string str1, string str2); private void Test() { Con ...
- cordova+vue 项目打包成APK应用遇到的问题和解决方法
公司前端界面用的是vue,我要嵌入到Android中生成App第一步:安装nodenode安装:直接进入官网https://nodejs.org/zh-cn/,下载最新版本安装.安装之后在命令行中使用 ...
- Linux(Centos7)下redis5集群搭建和使用
1.简要说明 2018年十月 Redis 发布了稳定版本的 5.0 版本,推出了各种新特性,其中一点是放弃 Ruby的集群方式,改为 使用 C语言编写的 redis-cli的方式,是集群的构建方式复杂 ...
- [Go]TCP服务中增加消息队列与工作池
之前的处理中每一个连接都会创建一个主groutine , 每个连接中的主groutine中创建出读groutine 和写groutine 每个连接处理业务再单独开出一个groutine ,这样如果有1 ...
- GithubPages+Hexo博客搭建记录
目录 前言 安装Node.js 安装Git 安装Hexo 查看效果 建立Github Pages 注册Github帐户 建立托管博客的仓库 制作SSH密钥 添加公钥到Github 测试连接 把本地的博 ...
- Java中的BufferedImage类、Image类、Graphics类
https://www.cnblogs.com/jpfss/p/11731812.html
- vuex——action,mutation,getters的调用
一.子模块调用根模块的方法 mutation调用 context.commit('clearloginInfo',{key_root:data},{root:true}); action调用 co ...
- java之对象创建时各成员变量的初始值
除了byte short int long float double char bollean这基础类型外,其余的都是引用类型 成员变量类型 初始值 byte 0 short 0 int 0 long ...
- php中对于file的相关语句
// 打开文件 fopen(); // 打开文件的方式 r 只读,r+ 读写方式打开 w 以写入的方式打开 w+ 以读写方式打开(以覆盖的形式写入) // a以写入的方式打开,文件不存在则创建 x创建 ...
- UI 自动化框架设想
测试框架选型: 首先,通过利用TestNG结合csv的使用,将测试用例数据转化为测试代码中的数据,减少了测试人员录入数据和准备数据的工具: 再次,通过对appium的封装,按照面向对象的思想将测试中用 ...