VUE-03-双向绑定

最新推荐文章于 2024-04-08 16:57:44 发布

Void_CM

最新推荐文章于 2024-04-08 16:57:44 发布

阅读量188

点赞数

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

本文链接：https://blog.csdn.net/baidu_41656912/article/details/115317188

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

VUE-03-双向绑定

Vue.js是一个MVVM框架,数据的双向绑定,我们已经体会到了数据变化,视图随之变化,但视图变化,数据变化体会不多,这里体验一下

明确:数据的双向绑定,针对UI控件,非UI控件不会涉及到数据双向绑定,单向数据绑定是使用状态管理工具的前提,如果使用vuex,那么数据流也是单向的,这时就会和双向数据绑定存在冲突

在表单中使用双向数据绑定

v-model指令:在表单<input>``<textarea>``<select>元素上创建双向数据绑定.会根据控件类型自动选取正确的方法来更新元素,本质是语法糖,负责监听用户的输入事件以更新数据

注意:v-model 会忽略所有表单元素的value,checked,selected特性的初始值,而总是将Vue实例的数据作为数据来源,所以应该通过JavaScript在组件的data选项中声名初始值

<body>
    <div id="app">
        输入的文本: <input type="text" v-model="message">  {{message}}
        <hr>
        性别
        <input type="radio" name="sex" value="男" v-model="gender">男
        <input type="radio" name="sex" value="女" v-model="gender">女
        <p>选中了{{gender}}</p>
        <hr>
        下拉框
        <select v-model="selected">
            <option value="">---请选择---</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
        <p>选中了{{selected}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                message: "123",
                gender: '',
                selected: ''
            }

        });
    </script>
</body>

Void_CM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE-03-双向绑定

VUE-03-双向绑定Vue.js是一个MVVM框架,数据的双向绑定,我们已经体会到了数据变化,视图随之变化,但视图变化,数据变化体会不多,这里体验一下明确:数据的双向绑定,针对UI控件,非UI控件不会涉及到数据双向绑定,单向数据绑定是使用状态管理工具的前提,如果使用vuex,那么数据流也是单向的,这时就会和双向数据绑定存在冲突在表单中使用双向数据绑定v-model指令:在表单<input>``<textarea>``<select>元素上创建双向数据绑定.会
复制链接

扫一扫