5.vue.js计算属性和侦听器

计算属性

 

<body>

    <div id="root">

        姓:<input v-model="firstName"/>

        名:<input v-model="lastName"/>

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

    </div>

 

    <script>

       new Vue({

           el: "#root",

           data: {

                firstName:"",

                lastName:""

            },

           // 计算属性

           computed: {

               fullName: function() {

                   return this.firstName+ '' + this.lastName

                }

           }

        })

    </script>

</body>

 

 

侦听器

 

<body>

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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页