一、 计算属性(computed

1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷。

  例如:

<div id="app">
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
</div>

  运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写。

  因此可改写为:

<body>
<div id="app">
{{ changewords }} // 渲染 不用写()
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{},
     // 计算属性
computed:{
changewords(){
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
}
})
</script>

总结:

  1.变量不在 data中定义,而是定义在computed中,写法跟写方法一样,有返回值。函数名直接在页面模板中渲染,不加小括号 。

  2.根据传入的变量的变化 进行结果的更新。

  3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化,它调用的就是上一次 计算缓存的数据,因此提高了程序的性能。而methods中每调用一次就会重新计算 一次,为了进行不必要的资源消耗,选择用计算属性。

计算属性模糊查询的例子:

<body>
<div id="app">
<input type="text" v-model="mytext">
<ul>
<li v-for="data in datalistcom" :key="data">
{{ data }}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{
datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
mytext:''
},
computed:{
datalistcom(){
return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
}
})
</script>

二、监听属性(watch)

上面说到计算属性的时候  初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。

当你有一些数据需要随着其它数据变动而变动时,或者当需要在数据变化时执行异步或开销较大的操作时,你可以使用 watch。

例子 :

<body>
<div id="app">
<p>单价:<input type="text" v-model="price"></p>
<p>数量:<input type="text" v-model="number"></p>
<p>计算金额:{{sum}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
price:100,
number:1,
sum:0
},
//监听某一个值或者状态发生变化 变化就会触发watch
watch:{
// 监听的参数的名字要一致
price(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
},
number(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
}
}
})
</script>

计算属性 和属性监听的区别:

1.计算属性变量在computed中定义,属性监听在data中定义。

2.计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数。

Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别的更多相关文章

  1. 监听配置问题,SID与Service_Name区别

    监听配置问题,SID与Service_Name区别 1.数据库实例名SID 概念:数据库实例名用于和操作系统进行联系的标识,是数据库和操作系统之间的交互用的书数据库实例名.实例名也被写入参数文件中,该 ...

  2. vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

  3. Vue中计算属性(computed)和监听属性函数watch的比较

    1.计算属性适用的情形我们可能会有这样的需求,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性.例如在下面这个例子中,如果我们使用监听函数,代码就会变得有点冗余. ...

  4. vue data中的对象的属性如何使用watch监听

    在写项目的时候遇到了一个问题,就是需要动态监听data中一个对象的属性的变化.遇到了许多坑,在此过程中也发现了两种解决方案. 一.通过deep属性实现 data() { return { parent ...

  5. vue学习-day05 -- 案例:名字合并(监听data数据的改变)

    1.案例:名字合并(监听data数据的改变) 使用keyup事件监听data数据的改变 <!DOCTYPE html> <html> <head> <titl ...

  6. watch实现监听Vuex状态监听(利用computed)

    Vuex 通过 store 选项,提供了一种机制将状态从根组件"注入"到每一个子组件中(需调用 Vue.use(Vuex)):通过在根实例中注册 store 选项,该 store ...

  7. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

  8. vue 路由缓存 路由嵌套 路由守卫 监听物理返回

    最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...

  9. 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化

    使用通配符监听所有自数据字段的变化

  10. 计算属性和监听,computed,watch

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Python中的 if __name__ == '__main__' 是什么意思?

    最近在看Python代码的时候,因为是Python初学者,看到这个if __name__ == '__main__' 的判断,并且下面还有代码语句,看了其他地方的说明,还是没搞明白是什么意思, 在看到 ...

  2. CSS-08-边框属性设置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. kali linux下的部分命令

    查看发行版本 cat    /etc/issue cat   /etc/*-release 查看内核版本 uname  -a 显示机器的处理器架构 arch uname -m 清屏 clear 命令行 ...

  4. Java练习题1

    题目1: 编程实现,现在有如下的一个数组: int oldArr[] = {1,3,4,5,0,0,6,6,0,5,4,7,6,7,0,5}; 要求将以上数组中值为0的项去掉,将不为0的值存入一个新的 ...

  5. ubuntu18.04编译jdk8

    准备编译环境 sudo apt-get install -y zip unzip build-essential libx11-dev libxext-dev libxrender-dev libxt ...

  6. Django报错Watching for file changes with StatReloader

    Django项目运行时出现:Watching for file changes with StatReloader错误 原因:环境里的django或者python的版本有问题 解决方案:升级或者降级D ...

  7. 逆向番茄社区app的rsa加密方式

    Parse RSA public and private key pair from string in Java 逆向某APP,发现其大部分配置文件都是加密的 .所以逆向算法并解密 RSA和AES密 ...

  8. SubList到底怎么转化为ArrayList?

    SubList 大家好,今天 Tony 给大家讲个SubList转化的坑. 这个错误真的会被忽略,大家好好的看看,这个错误我们生产环境还真的遇到过. 集合类型相信大家都很熟悉,在 Java 中 Arr ...

  9. LinearLayout里面的空间居中对齐

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  10. CSS的常用单位介绍

    ①px: 像素单位:它是英文单词pixel的缩写,意思为像素,即构成图片的每一个点,为图片显示的最小单位.它是一个绝 对尺寸单位,是固定的. ②em: 相对长度单位:它是英文单词emphasize的缩 ...