vue-08 表单数据双向绑定v-model

最新推荐文章于 2022-01-04 21:09:18 发布

Mr.菜园子

最新推荐文章于 2022-01-04 21:09:18 发布

阅读量80

点赞数

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

本文链接：https://blog.csdn.net/qq_34479912/article/details/114339013

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

单向绑定：数据变，视图变；视图变（浏览器控制台上更新html），数据不变；上面的都是单向绑定
双向绑定：数据变，视图变；视图变（在输入框更新），数据变；

v-model 指令用于表单数据双向绑定，针对以下类型：

text 文本
textarea 多行文本
radio 单选按钮
checkbox 复选框
select 下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo">
        <form action="#" @submit.prevent="submitForm">
            姓名（文本）：<input type="text" name="name" id="" v-model="name">
            <br><br>
            性别（单选按钮）：
            <input type="radio" name="sex" value="1" id="" v-model="sex">男
            <input type="radio" name="sex" value="0" id="" v-model="sex">女
            <br><br>
            技能（多选框）：
            <input type="checkbox" name="skills" value="java" id="" v-model="skills">java开发
            <input type="checkbox" name="skills" value="vue" id="" v-model="skills">Vue.js开发
            <input type="checkbox" name="skills" value="python" id="" v-model="skills">Python开发
            <br><br>
            城市（下拉框）：
            <select name="city" id="" v-model="city">
                <option v-for="c in citys" :value="c.code">{{c.name}}</option>
            </select>
            <br><br>
            说明（多行文字）：
            <textarea name="desc" id="" cols="30" rows="10" v-model="desc"></textarea>
            <br><br>
            <button type="submit">提交</button>
        </form>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#demo',
            data: {
                name: '',
                sex: 0,
                skills: ["vue"],
                citys: [
                    {code:'bj',name:'北京'},
                    {code:'sh',name:'上海'},
                    {code:'nj',name:'南京'}
                ],
                city: '',
                desc: ''
            },
            methods: {
                submitForm: function(){
                    alert(this.name + ',' + this.sex + ',' + this.skills + ',' + this.city + ',' + this.desc)
                }
            },
        })
    </script>
</body>
</html>

git源码：https://github.com/caiyuanzi-song/vue-demo.git

Mr.菜园子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue-08 表单数据双向绑定v-model

单向绑定：数据变，视图变；视图变（浏览器控制台上更新html），数据不变；上面的都是单向绑定双向绑定：数据变，视图变；视图变（在输入框更新），数据变；v-model 指令用于表单数据双向绑定，针对以下类型：text 文本 textarea 多行文本 radio 单选按钮 checkbox 复选框 select 下拉框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
复制链接

扫一扫