Vue学习3：计算属性computed与监听器
下面是计算属性相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
<script src="vue.js"></script>
</head>
<body>
<!--计算属性computed,可以用在一些复杂逻辑上-->
<div id="app">
<!--1.模板中逻辑过重，不易维护-->
<p>{{msg.split('').reverse().join('')}}</p><br>
<!--2.用上computed属性，适用于复杂逻辑-->
<p>原值:{{msg}}</p>
<p>使用computed:字符串反转后的值:{{reverseMsg}}</p><br>
<!--3.用methods-->
<p>原值:{{msg}}</p>
<p>使用methods:字符串反转后的值:{{reverseMsg1()}}</p><br>
<!--我们可以发现computed属性和methods得到的结果是一样的。但是computed是基于它的缓存依赖（例子中指vm.msg)，
只有相关依赖改变才会重新取值；但是methods，每次重新渲染时，都会重新取值-->
<!--所以说一般computed性能更好--> <!--计算属性默认只有getter,不过我们可以设置setter-->
<p>{{fullName}}</p>
<p>{{firstName}}</p>
<p>{{lastName}}</p>
</div> <script>
var vm=new Vue({
el: '#app',
//选项对象
data:{
msg:'hello',
firstName:'Smith',
lastName: 'Lee'
},
//声明计算属性,提供的函数将用作vm.reverseMsg的getter
//vm.reverseMsg依赖于vm.msg；vm.msg改变时，vm.reverseMsg也会改变
computed:{
//计算属性的getter
reverseMsg:function(){
return this.msg.split('').reverse().join('');
},
fullName:{
get:function(){
return this.firstName+' '+this.lastName;
},
set:function(newValue){
var value=newValue.split(' ');
this.firstName=value[0];
this.lastName=value[1];
}
} },
methods:{
reverseMsg1:function(){
return this.msg.split('').reverse().join('');
}
}
});
vm.fullName='John Lee';
</script>
</body>
</html>
2.下面是监听器相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue4 监听属性</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="meter">
<input type="text" v-model="kilometer">
<p class="test"></p>
</div>
<!--其实计算属性在大多数时候更合适，但是当数据执行异步操作或开销较大的操作时，需要采用监听器操作-->
<script>
var vm=new Vue({
el: '#app',
data:{
meter:'',
kilometer: ''
},
watch:{
//watch创建了meter和kilometer两个方法
meter:function(val){
this.meter=val;
this.kilometer=val/1000;
},
kilometer:function(val){
this.kilometer=val;
this.meter=val*1000;
}
}, });
vm.$watch('meter',function(newValue,oldValue){
document.getElementsByClassName('test')[0].innerHTML="meter新值："+newValue+ ";" + "meter旧值："+oldValue;
})
</script>
</body>
</html>
在第一个输入框中输入123后，运行结果：
参考：https://cn.vuejs.org/v2/guide/，http://www.runoob.com/vue2
Vue学习3：计算属性computed与监听器的更多相关文章
- VUE学习之计算属性computed
计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...
- Vue教程：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别
一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
- vue学习笔记 计算属性（四）
计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...
- Vue学习之--------计算属性（2022/7/9）
文章目录 1.计算属性 1.1 计算属性实现 1.1.1 基础知识 1.1.2 代码实例 1.1.3 测试效果 1.2 计算属性简写 1.2.1 简写代码 1.3 使用插值语法实现 1.3.1 代码实 ...
- vue监听器watch & 计算属性computed
侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...
随机推荐
- 执行Python出现LookupError: unknown encoding: cp65001解决办法
执行Python出现LookupError: unknown encoding: cp65001错误 dos下执行以下命令即可 chcp 以上.
- java 图片裁剪
图片裁剪功能,我一直以为是前端那边去做,后台不用做过多的考虑,现在我发现,前端去做裁剪好像不是太理想,我在这里简单地介绍一下我们大java的裁剪功能 前端只需要上传,x (x轴),y(y轴) , h( ...
- Vue自定义标签
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- 报错！！！Servlet.service() for servlet [action] in context with path [/myssh] threw exception [java.lang.NullPointerException] with root cause java.lang.NullPointerException
这个为什么报错啊~~ at com.hsp.basic.BasicService.executeQuery(BasicService.java:33) 这个对应的语句是 Query query = ...
- HTML5_canvas_像素操作_图片马赛克_图片反相
canvas 像素操作 像素,即像素点,一个像素只有一个颜色 100*100 的 px 的屏幕区域有 100*100*4 个像素点,即 width*height*4 rgba(0, 0, 0, 1); ...
- 前端性能优化 —— reflow(回流)和repaint(重绘)
简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...
- DEV中右键菜单如何只在非空单元格上显示？
问题: 1. 开发时,我的winform程序中有很多gridview,我希望右键菜单只在我点击非空的行时才显示,点击其他空白区域时不显示: 2. 有一个树状导航图,treelist 中的节点都有右键菜 ...
- c++第七周学习小结
时间过得好快,一下就上了好多节c++的课了.我们现在新学了控制语句和函数,这对我来说有点难.老师上课的时候ppt过得有些快,自己会跟不上,所以以后上课前要预习充分.在经过同学和搜索引擎帮助后,我完成了 ...
- 解决 AutoMapper ProjectTo 不起作用的问题
这两天在一个 ASP.NET Core 项目中遭遇了 AutoMapper ProjectTo 不起作用的奇怪问题,虽然在 ProjectTo 中指定了 DTO ,但 EF Core 生成的 SQL ...
- Sublime Text 3 使用心得
1.Ctrl + Shift + P : package control install package == > ConvertToUTF82.列模式: 苹果:OS X -鼠标左键+Optio ...