Vue 过滤器/watch/computed

过滤器

<!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>

 

posted @ 2019-06-03 18:22  认真对待世界的小白  阅读(392)  评论(0)  编辑  收藏  举报