过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"></div> <script type="text/javascript" src="../js/vue.min.js"></script> <script type="text/javascript"> // 全局过滤器 Vue.filter('myReverse', function(value, arg1) { return arg1 + ' ' + value.split('').reverse().join(''); }); // 过滤器的作用： 对你当前的数据添油加醋 /*在组件内部用
filters:{ 过滤器的名字:function(value){ //内部一定要return }
调用过滤器 ： 数据属性 | 过滤器的名字 } */ var App = { data() { return { price: 0, msg: 'hello filter' } }, template: ` <div> <input type="number" name = 'price' v-model = 'price'/> <h3>{{price | myCurrentcy}}</h3> <h4>{{ msg | myReverse('hehe')}}</h4> </div> `, filters: { myCurrentcy: function(value) { return '¥' + value; } } } new Vue({ el: '#app', components: { App }, template: '<App />' }); </script> </body> </html>
watch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <input type="text" name="" v-model='msg'> <h3>{{msg}}</h3> <button @click='stus[0].name = "rose"'>改变</button> <h4>{{stus[0].name}}</h4> </div> <script type="text/javascript" src="../js/vue.min.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: function() { return { msg: '', stus: [{ name: 'jack' }] } }, watch: { msg: function(newV, oldV) { // console.log(newV,oldV); if (newV === 'tusir') { console.log('tusir 出来了'); } }, // 监听复杂数据类型 object array 深度监视 stus: { deep: true, //深度监视 handler: function(newV, oldV) { console.log(newV[0].name); } } } }); </script> </body> </html>
computed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } ul li{ margin: 20px 20px; padding: 10px 5px; border-radius: 3px; } ul li.active{ background-color: #66FFFF; } </style> </head> <body> <div id="app"> <audio :src = 'getCurrentSongSrc' autoplay controls></audio> <ul> <li v-for = '(item,index) in musicData' :class = '{active:currentIndex == index}'
@click = 'clickHandler(index)'> <h2>{{item.id}}- 歌名：{{item.name}}</h2> <p>歌手:{{item.author}}</p> </li> </ul> </div> <script type="text/javascript" src="../js/vue.min.js"></script> <script type="text/javascript"> var musicData = [ {id:1,name:'于荣光 - 少林英雄',author:'于荣光',songSrc:'./static/于荣光 - 少林英雄.mp3'}, {id:2,name:'Joel Adams - Please Dont Go',author:'Joel Adams',
songSrc:'./static/Joel Adams - Please Dont Go.mp3'}, {id:3,name:'MKJ - Time',author:'MKJ',songSrc:'./static/MKJ - Time.mp3'}, {id:4,name:'Russ - Psycho (Pt. 2)',author:'Russ',songSrc:'./static/Russ - Psycho (Pt. 2).mp3'} ]; new Vue({ el:'#app', data(){ return { musicData:musicData, currentIndex: 0 } }, computed:{ getCurrentSongSrc:function() { // 默认只有getter return this.musicData[this.currentIndex].songSrc } }, methods:{ clickHandler(index){ this.currentIndex = index; } } }); </script> </body> </html>