vue计算属性和监听属性

1.计算属性

我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。其实计算属性主要用于监听，可以监听多个对象.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bb{
            background-color: tan;
        }

    </style>
    <script src="vue.js"></script>
</head>
<body>

    <div id="app">

        <h1>{{showpp}}</h1>
    </div>



</body>
<script>



        var card = new Vue({
            el:"#app",
            data:{
                price:100,
                name:'昭志',
                pp:'的pp'

            },
            methods:{

            },
            computed:{
                showpp(){

                    let s = this.name + ' ' + this.pp;
                    return s
                },



            }


        });
    </script>
</html>

2.监听属性

侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。

侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化后的数据值，第二个是变化前的数据值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bb{
            background-color: tan;
        }

    </style>
    <script src="vue.js"></script>
</head>
<body>

    <div id="app">

        <button @click="price+=1">价钱!!</button>
        <h1>{{price}}</h1>
        <input type="text" v-model="info.num">
    </div>



</body>
<script>



        var card = new Vue({
            el:"#app",
            data:{
                price:100,
                name:'昭志',
                pp:'的pp',
                info:{
                    num:20
                }

            },
            methods:{

            },
            watch:{

                // 'pp':function (){
                //
                // },

                // price(){
                //     alert(this.name + this.pp + '有危险!!!!')
                // }

                //  不支持这种写法
                // info.num(){
                //     console.log(this.info.num);
                // }
                // 监听嵌套数据的写法
                'info.num':function (){
                    console.log(this.info.num);
                }
            }


        });
    </script>
</html>

3. 用户名输入长度限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bb{
            background-color: tan;
        }

    </style>
    <script src="vue.js"></script>
</head>
<body>

    <div id="app">

        <input type="text" v-model="username">
    </div>



</body>
<script>

        var card = new Vue({
            el:"#app",
            data:{
                username:''

            },
            methods:{

            },
            watch:{
                username(){
                    console.log(this.username.length);
                    if (this.username.length > 6){
                        alert('差不多得了');
                        // this.username = this.username.slice(0,6);
                    }
                }

            }


        });
    </script>
</html>

 

posted @ 2021-04-12 11:25  urls  阅读(386)  评论(0)  编辑  收藏  举报