Vue 绑定事件

v-on简单例子

<!DOCTYPE html>
<meta charset="UTF-8" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <title>Title</title>
</head>
<body>

<div id="app">
    <button v-on:click="hello">点我点我</button>
</div>

<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"jie"
        },
        methods:{
            //方法必须定义在这
            hello:function () {
                alert(this.message);
            }
        }
    });
</script>
</body>
</html>

v-model

实现与表单双向绑定,数据同步。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    输入的文本<input v-model="message"><br>
    vue:{{message}}
</div>

<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:'123',
        }
    });
</script>
</body>
</html>
posted @ 2021-05-08 20:46  一个经常掉线的人  阅读(41)  评论(0)    收藏  举报