学习博客：【Vue】双向绑定

最新推荐文章于 2024-06-14 10:39:01 发布

「已注销」

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量104

点赞数

分类专栏： Vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/Aurinko324/article/details/125331541

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue是一个MVVM框架，即数据双向绑定，视图和数据会根据对方的变化而变化，仅UI控件涉及双向绑定

双向数据绑定 v-model指令在表单元素上创建双向数据绑定

v-model会忽略所有表单元素的value checked selected的初始值总是将 vue 实例的数据作为数据来源应通过 js 在组件的data选项中声明初始值

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

<!--View层 模板-->
<div id="app">
    <!--跟随输入-->
    请输入；<input type="text" v-model="message"> {{message}}
    <br>
    <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
    {{message}}
    <br>
    
    <!--多选-->
    性别：<input type="radio" name="sex" value="男" v-bind:checked="checked"> 男
    <input type="radio" name="sex" value="女"> 女
    <br>
    性别：<input type="radio" name="age" value="11" v-model="age"> 11
    <input type="radio" name="age" value="22" v-model="age"> 22
    <p>
        当前选中：{{age}}
    </p>
    
    <!--下拉框-->
    <select v-model="selected">
        <option disabled>请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br>
    <span>当前选项：{{selected}}</span>

</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        /*Model层 数据*/
        data:{
            message: "",
            checked: true,
            age: "",
            selected: ""
        }
    });
</script>
</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习博客：【Vue】双向绑定

Vue是一个MVVM框架，即数据双向绑定，视图和数据会根据对方的变化而变化，仅UI控件涉及双向绑定双向数据绑定 v-model指令在表单元素上创建双向数据绑定v-model会忽略所有表单元素的value checked selected的初始值总是将 vue 实例的数据作为数据来源应通过 js 在组件的data选项中声明初始值...
复制链接

扫一扫