Vue(基础三)_监听器与计算属性
一、前言
本文主要涉及： 1、watch()监听单个属性
二、主要内容
1、watch()监听器（监听单一数据）
（1）监听简单的数据类型
new Vue({
el:'#app',
data(){
return {
msg:''
}
},
watch:{
//第一个参数为新数据，第二个参数为老数据
msg:function(newV，oldV ){
console.log(newV,oldV)
}
}
})
（2）对于复杂的数据类型（数组，对象）不能用上面的来监听
<body>
<div id="app">
<input type="" name="" v-model='msg'>
<h4>{{stu[0].name}}</h4>
</div> <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app',
data(){
return {
msg:'',
stu:[{ name: 'jack'}] }
},
watch:{
//第一个参数为新数据，第二个参数为老数据
msg:function(newV,oldV){
console.log(newV,oldV)
}, stu:{
deep:true,
hander:function(newV, oldV){
console.log(newV[0].name) }
}
}
}) </script>
</body>
2、computed计算属性（可以监听多个属性）
（1）计算属性：在computed中定义计算属性的方法，在页面中用{{方法名}}来使用计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_计算属性和监视</title>
</head>
<body>
<div id="demo">
姓：<input type="text" name="" placeholder="First Name" v-model="firstName"><br>
名：<input type="text" name="" placeholder="Last Name" v-model="lastName"><br> 姓名1：<input type="text" name="" placeholder="Last Name" v-model="fullName1"><br> </div>
<script type="text/javascript" src="./vue.js"></script>
<script>
new Vue({
el:"#demo",
data:{
firstName: 'A',
lastName: 'B',
//fullName1:'A B'
},
computed:{
//fullName1的值是由前两个属性共同计算得到的
fullName1(){
return this.firstName +" "+this.lastName
}
}
})
</script>
</body>
</html>
计算属性使用(1).html
/*computed计算属性*/
computed:{
//fullName1的值是由前两个属性共同计算得到的
fullName1(){
return this.firstName +" "+this.lastName
}
},
实现效果（单向改变）：
（2）监视属性：通过vm对象的$watch()方法或者watch配置来监听指定的属性，当属性变化时，回调函数自动调用，在函数内部进行计算
a:配置监视
//配置监视
watch:{
firstName:function(newvalue, oldvalue){
this.fullName1 = newvalue + " " + this.lastName
} }
b:实例方法监视，vue实例中有一个$watch()方法来用于监听
//方法监视
vm.$watch('lastName',function(value){
this.fullName1 = this.firstName + value
})
结合watch和$watch()也能实现同样的效果
（3）计算属性的高级
a : 通过计算属性get/set实现对属性数据 的显示和监视（双向监听），每个属性都有一个get()和set()方法，下面在computed中给fullName1属性设置set和get方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_计算属性和监视</title>
</head>
<body>
<div id="demo">
姓：<input type="text" name="" placeholder="First Name" v-model="firstName"><br>
名：<input type="text" name="" placeholder="Last Name" v-model="lastName"><br> 姓名1：<input type="text" name="" placeholder="Last Name" v-model="fullName1"><br> </div>
<script type="text/javascript" src="./vue.js"></script>
<script>
const vm = new Vue({
el:"#demo",
data:{
firstName: 'A',
lastName: 'B' },
computed:{
fullName1:{
//当获取当前属性值的时候自动调用
get(){
return this.firstName + " " +this.lastName
},
//当属性值发生改变的时候监听属性值变化，
set(value){//value就是fullName1的最新属性值
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
}
})
</script>
</body>
</html>
效果：
b:计算属性存在缓存，当多次调用getter的时候，只执行一次，当执行第一次的时候就将数据存在缓存里面。
3、计算属性实现音乐列表
下面用一个例子来简单说明
点击列表，切换播放的音乐（这个例子不用计算属性也可实现，用了稍微有点绕，这里只是用他来说明计算属性是如何监听多个属性的）
不用计算属性的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0; } ul li{
height: 100px;
background-color: blue;
padding: 20px;
margin: 10px;
border-radius: 5px;
} ul li.active {
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div>
<audio :src="musicList[this.currentIndex].musicSrc" controls autoplay></audio>
<ul>
<li v-for="(item, index) in musicList" v-on:click='changeMusic(index)'>
<h4>{{item.music}}</h4>
<h6>{{item.musicSrc}}</h6>
<h1>{{index}}</h1> </li> </ul>
</div>
</div> <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var musicList = [
{id:0, music:'Jeol Adams - Please Dont GO.mp3',author:'Jeol', musicSrc:'./static/Joel Adams - Please Dont Go.mp3'},
{id:1, music:'MKJ - Time.mp3',author:'MKJ', musicSrc:'./static/MKJ - Time.mp3'},
{id:2, music:'Russ - Psycho (Pt. 2).mp3',author:'Russ', musicSrc:'./static/Russ - Psycho (Pt. 2).mp3'},
{id:3,music:'于荣光 - 少林英雄.mp3',author:'于荣光', musicSrc:'./static/于荣光 - 少林英雄.mp3'} ] var vm = new Vue({ el:"#app",
data(){
return{
musicList:musicList,
currentIndex:0 }
}, methods:{
changeMusic: function(index){
console.log(index)
return this.currentIndex=index;
} } }) console.log(vm)
</script>
</body>
</html>
不用计算属性实现音乐列表.html
使用计算属性实现音乐列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0; } ul li{
height: 100px;
background-color: blue;
padding: 20px;
margin: 10px;
border-radius: 5px;
} ul li.active {
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div>
<audio :src="getCurrentSongSrc" controls autoplay></audio>
<ul>
<li v-for="(item, index) in musicList" @click="changeMusic(index)">
<h4>{{item.music}}</h4>
<h6>{{item.musicSrc}}</h6> </li> </ul>
</div>
</div> <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var musicList = [
{music:'Jeol Adams - Please Dont GO.mp3',author:'Jeol', musicSrc:'./static/Joel Adams - Please Dont Go.mp3'},
{music:'MKJ - Time.mp3',author:'MKJ', musicSrc:'./static/MKJ - Time.mp3'},
{music:'Russ - Psycho (Pt. 2).mp3',author:'Russ', musicSrc:'./static/Russ - Psycho (Pt. 2).mp3'},
{music:'于荣光 - 少林英雄.mp3',author:'于荣光', musicSrc:'./static/于荣光 - 少林英雄.mp3'} ] new Vue({ el:"#app",
data(){
return{
musicList:musicList,
currentIndex:0 }
},
template:'',
computed:{ // musicList[this.currentIndex].musicSrc
getCurrentSongSrc: function(){
return this.musicList[this.currentIndex].musicSrc;
} },
methods:{
changeMusic(index){
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
使用计算属性实现音乐列表.html
具体实现：
三、总结
1、点击li标签获取当前li标签的索引：
<ul>
<li v-for="(item, index) in musicList" @click="changeMusic(index)"> </li>
</ul>
methods:{
clickHandler(index){
this.currentIndex = index;
}
}
Vue(基础三)_监听器与计算属性的更多相关文章
- Vue.js-05：第五章 - 计算属性与监听器
一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...
- C#_02.13_基础三_.NET类基础
C#_02.13_基础三_.NET类基础 一.类概述: 类是一个能存储数据和功能并执行代码的数据结构,包含数据成员和函数成员.(有什么和能够干什么) 运行中的程序是一组相互作用的对象的集合. 二.为类 ...
- vue从入门到进阶：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- Vue 监听器和计算属性到底有什么不同？
各自的适用场景 计算属性临时快照 官方文档对于计算属性提到了一个重要的点子--"临时快照"(可能就是前面说的计算属性缓存),每当源状态发生变化时,就会创建一个新的快照. 有时候创建 ...
- Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器
模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...
- vue监听器watch & 计算属性computed
侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...
- VUE -- Vue.js每天必学之计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
- vue基础三
1.模板语法 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染(render)函数,使用可 ...
- Vue.js基本规则提炼总结及计算属性学习
Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...
随机推荐
- 提示“Web打印服务CLodop未安装启动”的各种原因和解决方法
旧版提示:"CLodop云打印服务(localhost本地)未安装启动!"新版提示:"Web打印服务CLodop未安装启动,点击这里下载执行安装(若此前已安装过,可点这里 ...
- 如何强制关闭LODOP或c-lodop已经弹出的预览窗口
该文介绍一下LODOP和C-LODOP关于窗口的弹出,和如何强制关闭已经打开的预览窗口. 同一个页面,只能弹出一个窗口,lodop是禁止点击动作,而c-lodop会提示已有窗口开的,请关闭之类的默认提 ...
- 跳转语句之continue
js里面有两个跳转语句,一个是continue,一个是break.由于这两个跳转语句都是用于循环当中,因此他们也就只能用于while.for.do…while语句中,当然了,break多加一个swit ...
- ReadWriteLock读写锁（八）
前言:在JUC ReentrantReadWriteLock是基于AQS实现的读写锁实现. ReadWriteLock中定义了读写锁需要实现的接口,具体定义如下: public interface R ...
- Random Processes
对于信号处理来说,有一类信号是非常重要的,这类信号就是随机信号(random signal),也被称为随机过程(random processes/stochastic processes).在各种书籍 ...
- Nginx 完整安装篇
第一步安装各种编译库如c++编译库等 yum install -y gcc //安装GCC ...安装过程省略 yum install -y gcc-c++ //安装C++库用来编译c++ ...安装 ...
- SQL Server使用笔记
1.连接字符串 SQL Server 身份验证,如:"server=yqzhu-peter;database=WindWMNew1_DB;uid=sa;pwd=ABcd1234;Connec ...
- BZOJ1208[HNOI2004]宠物收养场——treap
凡凡开了一间宠物收养场.收养场提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,凡凡根据领养者的要求通过他自己发明的一个特殊的公式,得出该领养者希望领 ...
- 一种HBase表数据迁移方法的优化
1.背景调研: 目前存在的hbase数据迁移主要分如下几类: 根据上图,可以看出: 其实主要分为两种方式:(1)hadoop层:因为hbase底层是基于hdfs存储的,所以可以通过把hdfs上的数据拷 ...
- MT【278】二次齐次化
对于$c>0$,当非零实数$a,b$满足$4a^2-2ab+4b^2-c=0,$且使$|2a+b|$最大时,$\dfrac{3}{a}-\dfrac{4}{b}+\dfrac{5}{c}$的最小 ...