表单与v-model

Posted hongpeng0209

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表单与v-model相关的知识,希望对你有一定的参考价值。

基本用法

vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用,输入的内容会实时映射到绑定的数据上

example1:修改input框内容,message会实时渲染

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exmaple</title>
    <link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
    <input type="text" v-model="message">
    <p>输入的内容是{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

  

js

var app = new Vue({
    el: "#app",
    data : {
        message: ‘‘
    }
});

  

example2:单选按钮

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example2</title>
    <link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
    <input type="radio" v-model="picked" value="HTML" id="html">
    <label for="html">HTML</label>
    <br>
    <input type="radio" v-model="picked" value="JS" id="js">
    <label for="js">JS</label>
    <br>
    <input type="radio" v-model="picked" value="CSS" id="css">
    <label for="css">CSS</label>
    <br>
    <p>选择的项是{{ picked }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

  

js

var app = new Vue({
    el: "#app",
    data : {
        picked:‘js‘
    }
});

  

 example3:多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example2</title>
    <link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
    <input type="checkbox" v-model="checked" value="HTML" id="html">
    <label for="html">HTML</label>
    <br>
    <input type="checkbox" v-model="checked" value="JS" id="js">
    <label for="js">JS</label>
    <br>
    <input type="checkbox" v-model="checked" value="CSS" id="css">
    <label for="css">CSS</label>
    <br>
    <p>选择的项是{{ checked }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

  

js

var app = new Vue({
    el: "#app",
    data : {
        checked:[‘JS‘,‘HTML‘]
    }
});

  

example4:选择框

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example2</title>
    <link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
    <select v-model="selected" multiple>
        <option>html</option>
        <option>js</option>
        <option>css</option>
    </select>
    <p>选择的项是{{ selected }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

  

js

var app = new Vue({
    el: "#app",
    data : {
        selected: [‘html‘,‘css‘]
    }
});

  

此时v-model绑定的是一个数组

实际业务中,option通过v-for动态生成,value和text通过v-bind动态生成

example4可以修改一下

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example2</title>
    <link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
    <select v-model="selected">
        <option v-for="option in options" :value="option.value">{{ option.text }}</option>
    </select>
    <p>选择的项是{{ selected }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

  

js

var app = new Vue({
    el: "#app",
    data : {
        selected: ‘html‘,
        options:[
            {
                text:‘html‘,
                value:‘html‘,
            },
            {
                text:‘js‘,
                value:‘js‘,
            },
            {
                text:‘css‘,
                value:‘css‘
            }
        ]
    }
});

  

以上是关于表单与v-model的主要内容,如果未能解决你的问题,请参考以下文章

vue v-model 与 组件化的表单组件如何沟通

06.vue-charp-06 表单与v-model

Vue——表单与v-model

表单与v-model

02JS高阶函数v-model表单的双向绑定

Vue3的表单和开发模式