Vue-表单：v-model，双向数据绑定

Mr代先森

于 2020-04-14 14:56:30 发布

阅读量173

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/DAIJZ12138/article/details/105512184

版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Vue.js中表单控件的使用方法，包括文本输入、复选框及数据绑定技巧。展示了如何利用v-model指令实现双向数据绑定，使数据与表单元素实时同步，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="myApp">
    <input type="text" v-model="name" placeholder="來呀，編輯呀">//表单控件
    <p>Message is: {{ message }}</p>
    
    <input type="checkbox" id="hero" value="英雄联盟" v-model="games">
    <label for="hero">英雄联盟</label>
    <input type="checkbox" id="king" value="王者榮耀" v-model="games">
    <label for="king">王者榮耀</label>
    <p>Message is: {{ games }}</p>
    
    用户名：<input v-model.lazy="username">
    年龄：<input v-model.number="age" type="number">
    意见：<input v-model.trim="content">
    <p>Message is: {{ username }}</p>
</div>
<script>
    var myApp = new Vue({
        el: "#myApp",
        data: {
            name: "Jelly & ABC",
            games: []
        },
        methods: {}
    })
</script>