Vue-双向数据绑定VM_View-Model

最新推荐文章于 2024-06-15 14:47:15 发布

好运haoyun

最新推荐文章于 2024-06-15 14:47:15 发布

阅读量282

点赞数

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

本文链接：https://blog.csdn.net/qq_43439968/article/details/108425649

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

VM双向数据绑定

MVVM框架，当数据发生改变的时候，视图也发生变化，当视图发生变化的时候，数据也会发生变化

只要使用 v-model 指令在表单元素上创建双向数据绑定，v-model本质上是一个语法糖，负责监听用户的输入事件以更新数据，并对一些极端场景做一些处理

Demo

<div id="vue-app">
    <input type="text" v-model="message">{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#vue-app",
        data:{
            message:"haoyunTest"
        }
    });
</script>

view层随意更改model层就会跟着变化
model层更改view层也会变化，这就是双向绑定
下拉框

<body>
<div id="vue-app">
    <select v-model="message">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>{{message}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#vue-app",
        data:{
            <!--默认选中-->
            message:"B"
        }
    });
</script>
</body>

注意：
- v-model会忽略所有的表单元素，value、checked、selected特性的初始值而总是将vue实例的参数作为数据来源，声明初始值应该在JavaScript组件的data中声明
- ```
<select v-model="message">
    <option>A</option>
    <option>B</option>
    <option selected>C</option>
</select>
```
- 比如这里selected特性是下拉框默认，但是设置了v-model就会忽略这个
如果没有在data初始化的话应该写一个disabled 让它必须选择

<body>
<div id="vue-app">
    <select v-model="message">
        <option disabled value="">--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>{{message}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#vue-app",
        data:{
            <!--默认选中-->
            message:""
        }
    });
</script>
</body>