vue-3 单向双向数据绑定以及事件绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="https://vuejs.org/js/vue.js"></script>
        <script>
            /*
                v-bind:value=""   数据单向绑定  可以通过js来改变页面显示的值,只要js更改,页面就更改。
                v-model:"demo" 数据双向绑定  当value发生变化的时候,相应的js也被改变。 当js被改变的时候,绑定此js的单向绑定数据 也会跟着改变
                v-on:click="update"  时间绑定 可以绑定click点击 也可以绑定经过 离开等时间 来执行函数  函数写到 methods 对象里                


            */
            new Vue({
                el:"#app",
                template:`
                    <div>
                        单向数据绑定
                        <input type="text" v-bind:value="demo" :class="demo" :aaa="demo"><br>
                        双向数据绑定
                        <input type="text" v-model:"demo" :class="demo"><br>

                        {{demo}}

                        <button v-on:click="update">点击改变demo值</button>
                    </div>


                `,
                data:function(){
                    return {
                        demo:'1232'
                    }    
                },
                methods:{
                    update:function(){
                        this.demo = '666666';
                    }
                }



            })
        </script>
    </body>
</html>
发表评论 / Comment

用心评论~