Vue v-model理解值绑定和表单案例（七）

最新推荐文章于 2024-08-16 15:49:18 发布

Java语录精选

最新推荐文章于 2024-08-16 15:49:18 发布

阅读量286

点赞数 2

文章标签： vue java js

本文链接：https://blog.csdn.net/weixin_44716935/article/details/112726789

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.v-model二种指令的结合

a.v-bind指令，绑定data里面的值在页面显示，数据改变界面跟着改变是响应式编程。
b.v-bind不能实现页面输入值，data里跟着改变。要监听页面输入数据，通过v-on:input事件监听动作。

手动实现一个v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--    <input type="text" v-model="message">-->
    <!--    <input type="text" :value="user" @input="add"/>-->
    <input type="text" :value="user" @input="user =$event.target.value"/>
    <h1>{{user}}</h1>
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            user: ''
        },
        methods: {
            // add: function (event) {
            //     console.log(event)
            //     this.user = event.target.value;
            // }
        }
    })
</script>
</html>

二、v-model表单操作

a.提交流程（硬编码操作）v-model 绑定变量或对象、数组

数据保存在HTML value里面，value是html中服务器传过来的值，通过页面选择，双向绑定把value值，通过v-model绑定到data中变量，然后提交。这里不能使用v-bind

b.显示流程
data里面的值，动态显示到网页里面，通过v-mode 或 v-bind

单选框是 true 和 false 变量
多选框下拉框是数组保存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <label>
        <input type="radio" value="男" v-model="sex">男
    </label>
    <label>
        <input type="radio" value="女" v-model="sex">女
    </label>
    <h1>显示选择性别：{{ sex }}</h1>

    <br>

    <label>
        <input type="checkbox" v-model="is">点击单选框
    </label>
    <h1>{{is}}</h1>
    <button :disabled="!is">下一步</button>

    <br><br><br>

    <input type="checkbox" value="多选框1" v-model="datas">多选框1
    <input type="checkbox" value="多选框2" v-model="datas">多选框2
    <input type="checkbox" value="多选框3" v-model="datas">多选框3
    <h1>{{datas}}</h1>

    <br>
    <label>
        <select v-model="dataUser">
            <option disabled value="">请选择</option>
            <option value="李波">下拉框1</option>
            <option value="波菜">下拉框2</option>
            <option value="波波">下拉框3</option>
        </select>
    </label>
    <h1>下拉框选择的名字:{{dataUser}}</h1>
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            sex: '',
            is: false,
            datas: [],
            dataUser: [],
            selectUser: [],
            user: ['xiaobo', 'liyongob'],
        }
    })
</script>
</html>

三、v-mode 值绑定

实际项目中必须掌握的，很多值不是写死的，要动态传。for 循环item值传给绑定的v-bind:value 元素中的变量，通过v-model 读取到 value 里面的数据双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <label v-for="item in users">
        <input type="radio"  v-bind:value="item" v-model="listUser">
            {{listUser}}
        </input>
    </label>
    <h1>{{listUser}}</h1>

    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.type">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            users: ['xiaobo', 'liyongob'],
            listUser: '',

            selected: 'A',
            options: [
                {text: 'One', type: 'A'},
                {text: 'Two', type: 'B'},
                {text: 'Three', type: 'C'}
            ]
        }
    })
</script>
</html>