Vue学习之vue中的计算属性和侦听器

2022-01-09 13:25:12
<!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>vue</title>

    <script src="vue.js"></script>

</head>

<body>

    <!-- vue中的计算属性和侦听器

        计算属性：

        computed:{}

        性能高，当依赖的数据没有发生变化时，不会重新加载

        侦听器：

        watch

     -->

    <div id="root">

        姓：<input v-model="firstname" />

        名：<input v-model="lastname" />

        <div>{{fullName}}</div>

        <div>{{count}}</div>

    </div>

    <script>

        new Vue({

            el:"#root",

            data:{

                firstname:'',

                lastname:'',

                count: 0

            },

            computed:{

                fullName: function() {

                    return this.firstname + ' ' + this.lastname

                }

            },

            watch: {

              firstname: function() {

                  this.count ++

              },

              lastname: function() {

                  this.count ++

              },

              fullName: function() {

                  this.count ++

              }

             }

        })

    </script>

</body>

</html>
码农公寓

相关文章
