zoukankan      html  css  js  c++  java
  • vue基础---05侦听器

    00.watch(监听属性)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。
        <div id="app">
            {{msg}}
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    msg:"hello word!"
                },
                watch:{//监听事件,当mag值发生改变时,就会触发下面的函数
                    msg:function(val){//val表示修改后的内容
                        console.log("监听事件-----msg");
                    }
                }
            })
        </script>
    </body>
    </html>
    <!-- 在控制台输入app.msg="hello"修改msg来触发监听 -->

    01.get和set

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            set设置后的值:{{msg}}<br/>
            get获取的值显示在这里:{{reverseMsg}}</h1>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    msg:"hello word"
                },
                computed:{
                    reverseMsg:{
                        // get:function(){
                        //     return this.msg.split("").reverse().join("")
                        // }, 
                        // set:function(value){
                        //     this.msg=value.split("").reverse().join("") 
                        // }
                    },
                    reverseMsg:function(){
                        return this.msg.split("").reverse().jojn("")
                    }
                },
                watch:{
                    msg:function(val){
                            console.log("监听事件---msg");
                    }
                }
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    WPF窗口和用户控件事件相互触发
    C#排序算法总结
    C#.NET操作数据库通用类
    在C#的WPF程序使用XAML实现画线
    centos7 用户介绍
    Linux系列2
    nginx的使用
    TCP协议、三次握手以及滑动窗口等的介绍(计算机网络基础知识)
    mysql的
    jQuery的东西
  • 原文地址:https://www.cnblogs.com/hunter1/p/15250777.html
Copyright © 2011-2022 走看看