vue绑定事件、vue双向绑定 2022-3-14

最新推荐文章于 2024-01-28 22:45:26 发布

心️要努力吖

最新推荐文章于 2024-01-28 22:45:26 发布

阅读量756

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_56661579/article/details/123475845

版权

本文介绍了Vue框架中的事件绑定和双向数据绑定。详细讲解了Vue的7个常用属性，重点阐述了methods属性。在双向绑定部分，讨论了什么是双向绑定，以及如何在表单元素如textarea、单选框和下拉框中使用v-model实现数据同步。

摘要由CSDN通过智能技术生成

一、Vue绑定事件

1.1Vue的7个常用属性

以下一图是网络上的图
在这里插入图片描述

1.2 methods属性

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

<div id="app">
    <button v-on:click="sayHi">Click me</button>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model:数据
        data:{
            message:"hello,vue!"
        },
        methods:{
            sayHi:function (event){
                alert(this.message);
            }
        }

    })

</script>
&l