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>
  • 相关阅读:
    L84
    L83
    T57
    T56
    Listen 82
    Listen81
    PyQt(Python+Qt)学习随笔:QListView的isWrapping属性
    PyQt(Python+Qt)学习随笔:QListView的movement属性
    PyQt(Python+Qt)学习随笔:QListView的gridSize属性
    第15.20节 PyQt(Python+Qt)入门学习:QColumnView的作用及开发中对应Model的使用
  • 原文地址:https://www.cnblogs.com/hunter1/p/15250777.html
Copyright © 2011-2022 走看看