利用表单的双向绑定数据 v-model指令

最新推荐文章于 2024-04-21 19:25:34 发布

Ctrl Alt Shift

最新推荐文章于 2024-04-21 19:25:34 发布

阅读量429

点赞数

分类专栏： Web 前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_42676530/article/details/104196431

版权

Web 前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

v-model解释：

v-model是一个指令，作用是对应表单、及元素上创建双向数据绑定

1.输入框input

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
</head>
<body>
<!-- 双向绑定即当数据发生改变，DOM会自动更新 -->
<div id="app">
    您的姓名：<input type="text" v-model="message"/> <br/><br/>
    您好！
    <p>{{message}}</p>
</div>

<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:''
        }
    })
</script>

</body>
</html>

显示效果如下：
在这里插入图片描述

2.文本框textarea

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
</head>
<body>
<!-- 双向绑定即当数据发生改变，DOM会自动更新 -->
<div id="app">
    发表评论：<textarea name="" id="" cols="22" rows="5" v-model="message"></textarea>
    <br/><br/>
    <p>{{message}}</p>
</div>

<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:''
        }
    })
</script>
</body>
</html>

显示效果：
在这里插入图片描述

3.选择select

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
</head>
<body>
<!-- 双向绑定即当数据发生改变，DOM会自动更新 -->
<div id="app">
    <select name="" id="" v-model="message">
        <option v-for="(curriculum, index) in curriculums" :key="index">{{curriculum}}</option>
    </select>
    <p>{{message}}</p>
</div>

<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
                message: 'React.js',
                curriculums: ['Vue.js', 'React.js', 'Angular.js']
        }
    })
</script>
</body>
</html>

显示效果如下：
在这里插入图片描述

ps：我在查资料的时候搜到了一篇好文，写的很清楚，复制链接方便自己扩展也供大家查阅
https://blog.csdn.net/woshierdanya/article/details/96435189

Ctrl Alt Shift

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用表单的双向绑定数据 v-model指令

v-model解释：v-model是一个指令，作用是对应表单、及元素上创建双向数据绑定1.输入框input代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双向数据绑定</title></h...
复制链接

扫一扫

专栏目录