您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
getter与setter
发布时间：2020-02-16 21:42:45编辑：雪饮阅读（）
Getter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
template: `
<div>
<audio :src="songSrc" autoplay controls ></audio>
</div>
`,
data() {
return {
list:["1.mp3","2.mp3"],
index:0
}
},
computed:{
//定义getter或setter，默认为getter，则默认只能获取
songSrc:function(){
if(this.index==0){
this.index=1;
}
else{
this.index=0;
}
return this.list[this.index];
}
}
});
</script>
</body>
</html>
Getter与setter整合
<script type="text/javascript">
new Vue({
el: '#app',
//src直接获取，即便更换按钮执行了set后src也能自动获取到set之后的
template: `
<div>
<audio :src="songSrc" autoplay controls ></audio>
<button @click="changeMusic">更换</button>
</div>
`,
data() {
return {
list:["1.mp3","2.mp3"],
index:0
}
},
computed:{
songSrc:{
set:function(index){
this.index=index;
},
get:function(){
return this.list[this.index];
}
}
},
methods:{
changeMusic:function(){
var index=0;
if(this.index==0) index=1;
this.songSrc=index;
}
}
});
</script>
关键字词：vue,getter,setter