Vue学习_计算属性

实现姓名案例：

1.插值语法实现姓名案例

直接从vm中读取。

<!doctype html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--引入Vue--><script type="text/javascript" src="../js/vue.js"></script><title>姓名案例_插值语法实现</title>
</head>
<body><!--设置一个容器--><div id = "root">姓：<input type="text" v-model:value="firstname" ></br></br> <!--input框设置初始值用value-->名：<input type="text" v-model:value="lastname"></br></br>姓名：<span>{{firstname}}-{{lastname}}</span></div>
</body>
<script type="text/javascript">const vm = new Vue({el:'#root',data:{firstname:'张',lastname:'三',},})</script>
</html>

2.methods方法实现姓名案例

在methods方法中定义了一个fullname（）方法，姓名通过fullname（）方法获取到，其中的this指的是vue实例（如果是箭头函数，this指的就不是vue实例）

<!doctype html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--引入Vue--><script type="text/javascript" src="../js/vue.js"></script><title>姓名案例_methods方法实现</title>
</head>
<body>
<!--设置一个容器-->
<div id = "root">姓：<input type="text" v-model:value="firstname" ></br></br> <!--input框设置初始值用value-->名：<input type="text" v-model:value="lastname"></br></br>姓名：<span>{{fullname()}}</span>
</div>
</body>
<script type="text/javascript">const vm = new Vue({el:'#root',data:{firstname:'张',lastname:'三',},methods:{fullname(){return this.firstname + '-' + this.lastname;}},})</script>
</html>

3.计算属性实现姓名案例

（1）计算属性：是用已经写完的属性加工、计算，生成一个全新的属性。

原理：底层借助了Object.defineproperty提供getter和setter(计算属性修改相应，大多数情况下，计算属性是不修改的)。

优势：与methods相比，内部有缓存机制（复用），效率更高，调试方便。

<!doctype html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--引入Vue--><script type="text/javascript" src="../js/vue.js"></script><title>姓名案例_计算属性实现</title>
</head>
<body>
<!--设置一个容器-->
<div id = "root">姓：<input type="text" v-model:value="firstname" ></br></br> <!--input框设置初始值用value-->名：<input type="text" v-model:value="lastname"></br></br>姓名：<span>{{fullname}}</span>
</div>
</body>
<script type="text/javascript">const vm = new Vue({el:'#root',data:{firstname:'张',lastname:'三',},computed:{fullname:{/*get有什么作用？当有人读取fullname时，get就会被调用，并且get的返回值就是fullname的返回值*//*get什么时候读取？（1）初次读取fullname时；（2）所依赖的数据发生变化时（此处依赖firstname和lastname）*/get(){return this.firstname + "-" + this.lastname},/*set什么时候调用？当fullname被修改时*/set(value){const arr = value.split('-')this.firstname = arr[0]this.lastname = arr[1]}}}})
</script>
</html>

（2）计算属性在只考虑读取，不考虑修改时可以简写，fullname可以当做函数来写，但是读取时不能当做函数读取。

computed:{fullname() {return this.firstname + "-" + this.lastname;}}

Vue学习_计算属性相关推荐

[vue] watch和计算属性有什么区别？
[vue] watch和计算属性有什么区别? 一个是侦听属性,一个是计算属性 2.一个是为了应对复杂的逻辑计算,一个是对数据的变化作出反应 3.一个是只有当缓存改变时才执行,一个是只要从新渲染就会执行 ...
[vue] 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？
[vue] 在使用计算属性的时,函数名和data数据源中的数据可以同名吗? 莫名其妙的问题.可以同名,但data会覆盖methods.并且本就不该同名,同名说明你命名不规范.然后解释为什么会覆盖,因为 ...
Vue基础之计算属性
Vue基础之计算属性定义: 原理: get函数执行时机: 优势: 备注: Demo: 定义: 要用的属性不存在,要通过已有属性计算得来. 原理: 底层借助了Objcet.defineproperty ...
Vue中computed计算属性和data数据获取的问题
获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"><h ...
面试题！vue中的计算属性、方法、侦听属性
1.计算属性详细的内容可跳转至vue 计算属性可以使用计算属性来代替在表达式中进行的复杂运算,以便于能够更方便的维护与复用逻辑. 计算属性是在选项对象中使用 computed 字段来定义. 特点: ...
前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽＜slot＞_webpack使用_vue-router路由
四.第一个Vue程序 4.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si ...
vue的computed计算属性学习
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护.这时候需要使用到vue的计算属性computed. 文件目录结构如下:利用vue脚手架创建这 ...
Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...
Vue 第一天: 计算属性和观察者
计算属性和观察者计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

Vue学习_计算属性

1.插值语法实现姓名案例

2.methods方法实现姓名案例

3.计算属性实现姓名案例

Vue学习_计算属性相关推荐

最新文章

热门文章