Vue2.X 计算属性

Vue2.x 计算属性

写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！
学习来源： Vue + Vue-Cli 快速入门教程
李南江老师各平台账号：

微博：极客江南
微信公众号：李南江
腾讯课堂：李南江
网易云课堂：李南江

插值语法特点
可以在{{}}中编写合法的JavaScript表达式

在插值语法中编写JavaScript表达式缺点
1、没有代码提示
2、语句过于复杂不利于我们维护

如何解决?
对于任何复杂逻辑，你都应当使用计算属性

注意点:
虽然在定义计算属性的时候是通过一个函数返回的数据
但是在使用计算属性的时候不能在计算属性名称后面加上()
因为它是一个属性不是一个函数(方法)

html代码：

<div id="app"><p>{{name}}</p><p>{{age + 1}}</p><p>{{msg.split("").reverse().join("")}}</p><p>{{msg2}}</p>
</div>

vue代码：

// 这里就是MVVM中的View Model
let vue = new Vue({el: '#app',// 这里就是MVVM中的Modeldata: {name: "lnj",age: 18,msg: "abcdef"},// 专门用于存储监听事件回调函数methods: {},// 专门用于定义计算属性的computed: {msg2: function () {let res = "abcdef".split("").reverse().join("");return res;}}
});

Vue2.X 计算属性相关推荐

vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，动态改变星级，多种星星规格
vue2.0+stylus实现星级评定组件,computed计算属性实现全星半星,多种星星规格使用方法如下:(size为星星的大小,score为评分,比如传4.5,则4.5颗星亮:传4.1则四颗星亮 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch...
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
Vue2.（过滤器，Watch侦听器，计算属性，购物车案例）
目录过滤器 1.定义过滤器 2.私有过滤器和全局过滤器 3.连续调用多个过滤器 4.过滤器传参 5.过滤器的注意点 watch 侦听器(监视数据的变化) 1.使用 watch 检测用户名是否可用 2 ...
vue2.0中的watch和计算属性computed
watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <ht ...
Vue2中使用计算属性
计算属性的概念与使用场景主要有以下几点 1.初始化时,要显示的数据,不存在,需要通过计算操作得 2.执行的时机有2步: (1)初始化显示会执行一次(有特殊情况),拿到初始值,去显示.(2)当计算属性时 ...
vue2计算属性computed
1.什么是计算属性概念: 1.计算属性是vue的一个特性,此属性有计算能力,也就相当于一个函数.可以将计算结果缓存,作为一个属性使用. 特点: 1.要在 methods: { } 或者 comput ...
五十八、Vue中的计算属性，方法和侦听器
@Author:Runsen @Date:2020/10/15 本篇是水篇,记录前端的学习,争取早日拿到前端offer 计算属性,方法和侦听器所以,对于任何复杂逻辑,你都应当使用计算属性.(官方原话 ...
关闭Vue计算属性自带的缓存功能
使用Vue的小伙伴都会知道,vue的计算属性.这个是这个样子解释的,当某些依赖值发生变化的时候,其自身的值也会发生变化,与之先关的DOM也会发生变化,通常呢,这个计算属性里面都会有两个方法:get和s ...
计算属性computed的使用
效果图 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8&q ...

Vue2.X 计算属性

Vue2.x 计算属性

Vue2.X 计算属性相关推荐

最新文章

热门文章