vue中的计算属性和侦听属性

2024-10-02 12:37:30

计算属性

计算属性用于处理复杂的业务逻辑

计算属性具有依赖性，计算属性依赖 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 计算属性和侦听属性的资料请关注我们其它相关文章！

Vue2 监听属性改变watch的实例代码

效果: 代码: <div id="app2"> <label>幼儿园入学年龄(3-6):</label><input type="number" v-model="child.age"> <button @click="older"> + </button> <button @click="younger"> - </
Vue computed 计算属性代码实例

什么是计算属性??? 1.在computed中,可以定义一些属性,这些属性叫做[计算属性] 2.计算属性的本质是一个方法,不过一般是将他们的名称直接当做属性使用,不会当方法调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../lib/vue-2.4.0.js"></scri
详解vue2.0监听属性的使用心得及搭配计算属性的使用

我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助: 1.基础版监听: 场景如下:输入框输入你的年龄,如果年龄在0-15岁提示信息:你还是个小孩,如果年龄在 15-25岁,提示信息:你已经是个少年,如果年龄在25岁以上,提示信息:你已经长大了.根据需求配合监听属性我们得到下面的代码: <template> <div id="app"> 年齡:<input type
深入浅析Vue.js计算属性和侦听器

一. 概述计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于
Vue学习笔记之计算属性与侦听器用法

本文实例讲述了Vue计算属性与侦听器用法.分享给大家供大家参考,具体如下: vue之所以加载速度非常块,是因为在数据改变时,它并不是将所有组件都刷新,而是在重用代码的基础上对发生改变的地方进行渲染.同时,还得益于计算属性的使用: 1.计算属性像绑定普通属性一样在模板中绑定计算属性.例如reverseName属性依赖于firstName和lastName,当firstName或lastName发生改变时,依赖于它的 reverseName 也会更新. 利用函数方法也可以实现类似的效果,不同的是计
Vue 2.0 侦听器 watch属性代码详解

用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的表达式(函数),还可以是一个对象,可以包含如下几个属性: handler ;对应的函数 ;可以带两个参数,分别是新的值
详解vue 计算属性与方法跟侦听器区别(面试考点)

计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于任何复杂逻辑
用Vue.js实现监听属性的变化

前言创建 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的 Object.defineProperty 将它们转为 getter/setter,在其内部 Vue 可以追踪依赖.通知变化. const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部,同 'this.foo') 是响应的 }) 观察属性变化 Vue 的实例提供了 $watch 方法,用于观察属性变化. const vm = new Vue({ data: {foo:
详解Vue之计算属性

模板内的表达式通常用于简单的运算,当其过长或逻辑复复杂时,会变得难以维护什么是计算属性在Vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长,或者逻辑更为复杂时,就会变得臃肿甚至难以维护和阅读,比如 <div> {{text.split(',').reverse().join(',')}} </div>. 这里表达式包含三个操作,并不是很清晰,所以在遇到复杂的逻辑时应该使用计算属性,上例可以用计算属性进行改写: <div id="Calculat
vue计算属性+vue中class与style绑定(推荐)

vue计算属性在模板中放入大量的逻辑会让模板过重且难以维护计算属性下所有函数可以放到computed中 class与style绑定原始写法 v-bind:class 缩写 :class class绑定的三种形式 style的三种绑定形式属性值为true显示,false不显示第一种绑定方式: 第二种绑定方式: 第三种绑定方式: style修改方式1: 方式2: 方式三: ps:下面通过代码介绍下计算属性计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部
vue计算属性computed的使用方法示例

本文实例讲述了vue计算属性computed的使用方法.分享给大家供大家参考,具体如下: computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些业务逻辑代码,一定记得return <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
解决vue无法侦听数组及对象属性的变化问题

一.数组 1.可以监听到的情况如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况使用下标修改某个元素(这种比较常见) array[index] = 1 object.a = 3 直接修改数组length array.length = 5 3.解决方案 this.$set(array, index, data) - 这是个深度的修改,某些情况下可能导致你不希望的结果,因此最好还是慎用 this.dataArr = this.originArr this.$se

vue中的计算属性和侦听属性

相关推荐

随机推荐