vue computed
Vue computed
2023-09-11 14:22:19 时间
computed 用来监听多个
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } ul li{ margin: 20px 20px; padding: 10px 5px; border-radius: 3px; } ul li.active{ background-color:rebeccapurple; } </style> </head> <body> <div id="app"> <audio :src = 'getCurrentSongSrc' autoplay controls></audio> </audio> <ul > <li v-for="(item,index) in musicData" :class = '{active:currentIndex == index}' @click = 'clickHandler(index)'> <p>歌手:{{item.auther}}</p> <P>{{item.kid}} - 歌名:{{item.name}}</P> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script type="text/javascript"> let musicData=[ { id:1,name:"我已经爱上你",auther:'二郎',src:'./static/情词尧,二郎 - 我已经爱上你(情词尧/二郎).mp3' },{ id:2,name:"JUNIEL - illa illa",auther:'일라 일라',src:'./static/JUNIEL - illa illa (일라 일라).mp3' }, { id:3,name:"体面",auther:'迟青',src:'./static/迟青 - 体面.mp3' },{ id:4,name:"私奔",auther:'曾轶可',src:'./static/曾轶可 - 私奔.mp3' } ] new Vue({ el:'#app', data() { return { musicData:musicData, currentIndex:0 } }, computed:{ getCurrentSongSrc:function() { // 默认只有getter return this.musicData[this.currentIndex].src } }, methods:{ clickHandler(index){ this.currentIndex = index; } } }); </script> </body> </html>
效果:
相关文章
- vue - check-version
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- 【Vue】input文本框通过methods和computed动态绑定数值
- Vue - 完美解决小数的四则运算(加减乘除)导致精度丢失问题,提供详细计算示例代码vue数据计算丢失精度
- Vue - <transition> can only be used on a single element. Use <transition-group> for lists. 解决方案
- vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题
- 【可视化】Vue基础
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- vue-cli3+cordova实现app混合开发
- vue脚手架引入swiper
- vue基础---Class 与 Style 绑定
- Vue报错笔记(1)vue.esm.js?efeb:628 [Vue warn]: Property or method “handleClick“ is not defined on the...
- vue学习笔记八:Jquery VS Vue之全局属性对照
- vue学习笔记三:Jquery VS Vue之差异比较概览
- vue文档摘录九:Vue Router
- Vue富文本编辑器的使用vue-quill-deitor
- webpack.config.js和vue.config.js的区别
- Vue之computed计算属性
- Vue实战第3章:主页设计之顶部导航栏
- Vue-cli 4在vue.config.js中配置别名
- vue前台(二)解决编程式路由,多次点击,报错的问题
- Vue中computed和watch使用场景和方法
- Django+Vue项目学习第九篇:vue项目部署到服务器
- Django+Vue项目学习第六篇:vue+django发送post请求,设置不同content-type,前后端如何处理参数
- Vue脚手架报错: Component name “xxx“ should always be multi-word(vue/multi-word-component-names)的解决办法
- 【VUE】vue配置Gzip压缩
- Vue.js 样式绑定
- Vue-计算属性(computed)简单说明和使用
- vue-router 的URL路径中#的意义