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 ...
随机推荐
- H3C VLSM
- 【u202】家庭作业
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 老师在开学第一天就把所有作业都布置了,每个作业如果在规定的时间内交上来的话才有学分.每个作业的截止日期 ...
- 基于ElementUI封装Excel数据导入组件
由于前端项目使用的是Vue-cli3.0 + TypeScript的架构,所以该组件也是基于ts语法封装的,组件的完整代码如下: <template> <div id="m ...
- import()函数
简介 import命令会被 JavaScript 引擎静态分析,先于模块内的其他模块执行(叫做”连接“更合适).所以,下面的代码会报错. // 报错 if (x === 2) { import MyM ...
- 个人笔记-快速搭建k8s-1.16.0
1.阿里云购买4台实例 4核16G 120G云盘 centos7.6 固定带宽1M(双主双从) https://www.aliyun.com/ 2.安装dockeryum remove docker ...
- SQL SQL Index SEEK VS Lookup
SEEK - find everything from index Lookup - find key from index, then visit table to find other row d ...
- HDU 2102 A计划 DFS与BFS两种写法 [搜索]
1.题意:一位公主被困在迷宫里,一位勇士前去营救,迷宫为两层,规模为N*M,迷宫入口为(0,0,0),公主的位置用'P'标记:迷宫内,'.'表示空地,'*'表示墙,特殊的,'#'表示时空传输机,走到这 ...
- 一些实战中总结的 javascript 开发经验
Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站. 尽管很多的开发人员都乐于颂扬 javascript,但是仍旧有人看到它的阴暗面. ...
- 浪潮服务器装linux系统无法识别硬盘
先说无法识别硬盘的原因是没有安装和系统相对应的raid驱动. 公司需要两台Linux的物理服务器来部署业务系统. 客户给了两台浪潮的服务器. 1.先把linux系统刻录到u盘 2要先看一下raid卡的 ...
- 洛谷$P$3301 $[SDOI2013]$方程 $exLucas$+容斥
正解:$exLucas$+容斥 解题报告: 传送门! 在做了一定的容斥的题之后再看到这种题自然而然就应该想到容斥,,,? 没错这题确实就是容斥,和这题有点儿像 注意下的是这里的大于和小于条件处理方式不 ...