Vue双向绑定

最新推荐文章于 2024-05-17 11:40:43 发布

键盘侠Hyatt

最新推荐文章于 2024-05-17 11:40:43 发布

阅读量561

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_18149105/article/details/123538786

版权

VUE 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第四章 Vue双向绑定

文章目录

第四章 Vue双向绑定
前言
一、双向绑定示例
总结

前言

Vue从入门到精通学习笔记

一、双向绑定示例

可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<!--view层模板层-->
<div id="app">
    下拉框：
    <select v-model="selected">
        <option value="" disabled>请选择</option>
        <option>A</option>
        <option>B</option>
    <option>C</option>
    </select>
    <span>value:{{selected}}</span>
</div>

<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //模板数据层
        data: {
            selected: ''
        }
    })
</script>

</body>
</html>

注意：v-model表达式的初始值未能匹配任何选项，元系将被渲染为“未选中”状态。在iOS中，这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项

总结

Vue试一个MVVM框架，即数据双向绑定，当数据发生变化时，视图也会随着变化，当视图发生变化时，数据同样也会变化。

键盘侠Hyatt

关注

0
点赞
踩
0

收藏

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

第四章 Vue双向绑定文章目录第四章 Vue双向绑定前言一、双向绑定示例总结前言Vue从入门到精通学习笔记一、双向绑定示例可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫