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 ...
随机推荐
- 【74.00%】【codeforces 747A】Display Size
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- Iptables&Firewalld防火墙
一.IPtables 1.IPtables入门简介 Netfilter/Iptables(以下简称Iptables)是unix/linux自带的一款优秀且开放源代码的完全自由的基于包过滤的防火墙工具, ...
- DRF框架中的异常处理程序
目录 DRF框架中自定义异常处理 一.自定义异常的原因 二.如何设置处理异常的程序 DRF框架中自定义异常处理 一.自定义异常的原因 在Django和DRF框架中都封装了很多的处理异常的程序,可以处理 ...
- Kubernetes基本概念和术语之《Pod》
Pod是Kubernetes的最重要也最基本的概念.我们看到每个Pod都有一个特殊的被称为“根容器”的Pause容器对应的镜像属于Kubernetes平台的一部分.除了Pause容器,每个Pod还包含 ...
- TCP/IP DNS
1.概述 域名系统(DNS)是一种用于TCP/IP应用程序的分布式数据库,提供主机名字和ip地址转换的选路信息,在应用的角度上,DNS的访问通过地址解析器(resolver)完成,在unix中,解 ...
- jenkins安装自动部署
1.1简介: 开源项目,一个可扩展的持续集成引擎.提供了一种易于使用的持续集成系统,能实施监控集成中存在的错误,提供详细的日志文件和提醒功能,还能用图表的形式形象地展示项目构建的趋势和稳定性.还做到持 ...
- 006一句话解决主机pc，Vmware虚拟机，开发板之间的ping问题
- $vjudge\ CSP-S$专题专练题解
照例先放个链接$QwQ$ $A$ $QwQ$之前写过题解辣. 重新说下趴,就给横坐标纵坐标也开点,然后每个点连向对应横纵坐标边权为$0$,相邻横坐标点之间连边,相邻纵坐标点之间连边,跑个最短路就完事$ ...
- 【一起学源码-微服务】Nexflix Eureka 源码五：EurekaClient启动要经历哪些艰难险阻？
前言 在源码分析三.四都有提及到EurekaClient启动的一些过程.因为EurekaServer在集群模式下 自己本身就是一个client,所以之前初始化eurekaServerContext就有 ...
- [系列] Go 如何解析 JSON 数据？
概述 最近掉进需求坑了,刚爬上来,评估排期出现了严重问题,下面三张图很符合当时的心境. 谈需求 估排期 开始干 为啥会这样,我简单总结了下: 与第三方对接. 跨团队对接. 首次用 Go 做项目. 业务 ...