vue计算属性例子
不使用计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="music">
<audio muted :src="currentSrc" autoplay="autoplay" controls="controls" @ended="nextSongs"></audio>
<ul>
<li v-for="(item, index) in musicArr" @click="clickHandler(item)">
<h4>歌名: {{item.name}}</h4>
<p>作者：{{item.author}}</p>
<hr>
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var songs = [
{id:1, src:"./audios/1.mp3", name:"Bend Your Mind", author:"Elysian Fields"},
{id:2, src:"./audios/2.mp3", name:"Talk Baby Talk", author:"Emma Louise"},
{id:3, src:"./audios/3.mp3", name:"1965", author:"Zella Day"},
{id:4, src:"./audios/4.mp3", name:"岁月神偷", author:"金玟岐"}
]
var mu = new Vue({
el: "#music",
data: {
musicArr: songs,
currentSrc: "./audios/1.mp3",
currentIndex: 0, },
methods:{
clickHandler(item){
this.currentSrc = item.src;
},
nextSongs(){
this.currentIndex += 1;
this.currentSrc = this.musicArr[this.currentIndex].src;
console.log(this.currentSrc)
}
},
computed:{},
})
</script>
</body>
</html>
使用计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="music">
<audio :src="getSrc" autoplay="" controls="" @ended="nextSongs"></audio>
<ul>
<li v-for="(item, index) in musicArr" @click="clickHandler(index)">
<h4>歌名: {{item.name}}</h4>
<p>作者：{{item.author}}</p>
<hr>
</li>
</ul>
<button @click="addOne">添加</button>
</div>
<script src="./js/vue.js"></script>
<script>
var songs = [
{id:1, src:"./audios/1.mp3", name:"Bend Your Mind", author:"Elysian Fields"},
{id:2, src:"./audios/2.mp3", name:"Talk Baby Talk", author:"Emma Louise"},
{id:3, src:"./audios/3.mp3", name:"1965", author:"Zella Day"},
{id:4, src:"./audios/4.mp3", name:"岁月神偷", author:"金玟岐"}
]
var mu = new Vue({
el: "#music",
data:{
musicArr: songs,
currentIndex: 0, },
methods: {
clickHandler(index){
this.currentIndex = index;
},
nextSongs(){
this.currentIndex++;
},
addOne(){
this.musicArr.push({id:5, src:"./audios/4.mp3", name:"岁1月神偷", author:"金玟岐"})
},
},
computed:{
getSrc:{
set:function(newValue){},
get:function(){
return this.musicArr[this.currentIndex].src;
}
},
}
})
</script>
</body>
</html>
计算data的属性
vue计算属性例子的更多相关文章
- vue计算属性和观察者
1. 计算属性 模板内的表达式非常便利,但在模板中放入太多的逻辑会让模板过重且难以维护,所有就有了计算属性 例子: //html代码 <div id="example"> ...
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- 在做vue计算属性，v-for处理数组时遇到的一个bug
bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue 计算属性 实例选项 生命周期
vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...
- Vue计算属性缓存(computed) vs 方法
Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...
- vue 计算属性实现过滤关键词
效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 第三节：Vue计算属性
计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...
随机推荐
- linux进程唤醒的细节
我们已展现的唤醒进程的样子比内核中真正发生的要简单. 当进程被唤醒时产生的真正动 作是被位于等待队列入口项的一个函数控制的. 缺省的唤醒函数[22]22设置进程为可运行的 状态, 并且可能地进行一个上 ...
- Linux 内核存取配置空间
在驱动已探测到设备后, 它常常需要读或写 3 个地址空间: 内存, 端口, 和配置. 特别 地, 存取配置空间对驱动是至关重要的, 因为这是唯一的找到设备被映射到内存和 I/O 空间的位置的方法. 因 ...
- java反射小实例
利用反射实现 对配置文件的更改达到更改方法的目的 文件夹目录 首先Student类中有个sleep方法 pro.properties定义了参数 最后是RelectTestMain. package c ...
- How to use code to exit the application in UWP
I will tell you how to exit the application in UWP by the code. We can call some static method to he ...
- 【Docker】企业级镜像仓库harbor的搭建(http/https)及使用
一:用途 Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器. 二:安装docker-ce 环境:阿里云轻量应用服务器CentOS 7.3 这里通过yum Docker源仓 ...
- 魅族--魅蓝metal
评论:金属潮流平民化
- python简单小程序
#足球队寻找10 到12岁的小女孩(包含10岁和12岁),编写程序询问用户性别和年龄,然后显示一条消息指出这个人是否可以加入球队,询问10次,输出满足条件的总人数#询问10次,输出满足要求的总人数 o ...
- 011.MFC_Slider
滑块CSliderCtrl 常用函数SetLineSize() GetLineSize() SetPageSize() GetPageSize()SetRangeMax() GetRangeMax() ...
- python之子类继承父类时进行初始化的一些问题
直接看代码: class Person: def __init__(self): self.name = "jack" class Student(Person): def __i ...
- CompositePattern(组合模式)-----Java/.Net
组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结构型模式, ...