vue 计算属性和监听器
2024-09-07 12:35:24
一、计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div>
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
<div id = 'com'>
<h3>{{msg}}</h3>
<p>{{currentMsg}}</p>
<button @click='clickHandler'>更改</button>
</div>
var com = new Vue({
el:'#com',
data:{
msg:'学习computed'
},
methods:{
clickHandler(){
this.msg = '我更改了数据'
}
},
computed:{
currentMsg(){
// computed方法中默认只有getter
return this.msg
}
}
})
computed是计算属性,vue会一直监听着里面的变量,如果你的变量发生了变化,computed会立刻执行getter方法
重新渲染到页面上.
这也是vue的核心思想数据驱动视图
计算属性默认只有getter,当然如果你需要也可以设置setter
var com = new Vue({
el:'#com',
data:{
msg:'学习computed'
},
methods:{
clickHandler(){
this.currentMsg = '我更改了数据'
}
},
computed:{
currentMsg:{
set : function(newValue){
this.msg = newValue;
},
get : function(){
return this.msg;
}
}
}
})
示例一:轮播图:
<div id="app">
<div>
<img :src="currentImg" alt="" @mouseenter="stoplunbo()" @mouseleave="startlunbo()">
<ul>
<li v-for="(item,index) in ImgAttr" @click="liChangeImg(item)">{{index+1}}</li>
</ul>
</div>
<button @click="nextImg()">下一张</button>
<button @click="prevImg()">上一张</button> </div>
var app = new Vue({
el:'#app',
//所有的数据都放在数据属性里
data:{
currentNum:0,
currentImg:'./1.jpg',
str:'<p>哈哈哈</p>',
ImgAttr:[
{id:1,src:'./1.jpg'},
{id:2,src:'./2.jpg'},
{id:3,src:'./3.jpg'},
{id:4,src:'./4.jpg'}
],
Timer:null,
},
created(){
this.Timer = setInterval(this.nextImg,2000)
},
methods:{
//单体模式
clickHandler(){
//this 就是app实例化对象
this.show=!this.show;
},
ChangeColor(){
this.isRed=!this.isRed;
},
nextImg(){
if (this.currentNum==this.ImgAttr.length-1 ){
this.currentNum=-1;
}
this.currentNum++;
this.currentImg=this.ImgAttr[this.currentNum].src;
},
liChangeImg(item){
this.currentNum=item.id-1;
this.currentImg=item.src;
},
stoplunbo(){
clearInterval(this.Timer);
},
startlunbo(){
this.Timer = setInterval(this.nextImg,2000)
},
prevImg(){
if (this.currentNum == 0){
this.currentNum=this.ImgAttr.length-1;
}
this.currentNum--;
this.currentImg=this.ImgAttr[this.currentNum].src;
}
}
})
当然这里没有用到计算属性,如果用到了计算属性,也可以进行优化:
示例二:
<div id="app">
<div>{{showli}}</div>
<ul>
<li v-for="(item,index) in songs" @click="changename(index)">
<p>name:{{item.name}} author:{{item.author}}</p>
</li>
</ul>
<button @click="additem()">additem</button>
</div>
<script>
var songs=[
{'id':1,'src':'1.mp3','author':'chen1','name':'桃花朵朵开1'},
{'id':2,'src':'2.mp3','author':'chen2','name':'桃花朵朵开2'},
{'id':3,'src':'3.mp3','author':'chen3','name':'桃花朵朵开3'},
{'id':4,'src':'4.mp3','author':'chen4','name':'桃花朵朵开4'}
]; var app=new Vue({
el:'#app',
data:{
songs:songs,
currentIndex:0,
},
methods:{
changename(index){
this.currentIndex=index;
},
additem(){
this.songs.push({'id':5,'src':'5.mp3','author':'chen5','name':'桃花朵朵开5'})
}
},
computed:{
showli(){
return this.songs[this.currentIndex].name
}
}
})
</script>
这里需要说的是,在computed里面的变量,如果发生了改变,那么就会执行相应的getter,在驱动视图的改变.
最新文章
- 解决eclipse编辑js和html卡的问题
- [划分树] POJ 2104 K-th Number
- C#数据类型分类
- Android 手机卫士--home界面布局
- C++库(Thrift)
- linux下安装nginx、pcre、zlib、openssl
- CString的GetBuffer用法，GetBuffer本质，GetBuffer常见问题解决方法
- iOS app 上架的流程与注意点
- 49. 面向对象的LotusScript（十五）之Log4Dom下
- XManager与SecureCRT
- 【Teradata SQL】FALLBACK表改为NO FALLBACK表
- JavaScript属性（第三天）
- 复习python（条件判断、循环、字符串格式化）
- eclipse中的javaEE插件
- Django基础(三)
- python的基本用法（一）
- .NET批量操作窗口样式
- Spring Data JPA 实现多表关联查询
- 【学习笔记】--- 老男孩学Python，day16-17 初识面向对象,类名称空间,查询顺序,组合
- 利用MapReduce实现倒排索引