数据绑定

单项绑定（v-bind）

数据只能从data流向页面

双向绑定（v-model）

数据不仅能从data流向页面，还可以从页面流向data

备注

 1. 双向绑定一般应用在表单类上，（如：input,select等）
2.v-model:value 可以简写成 v-model 因为v-model默认收集的就是value的值

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 普通写法 -->
        单向绑定: <input type="text" v-bind:value="name"><br>
        双向绑定：<input type="text" v-model:value="name">
        <!-- 简写 -->
        单向绑定: <input type="text" :value="name"><br>
        <!-- v-model默认就是绑定value的值 -->
        双向绑定：<input type="text" v-model="name">
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:"#root",
            data:{
                name:"刘123",
            }
        })
    </script>
</body>
</html>

posted @ 2022-07-15 18:10 小罗要有出息阅读(50) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue基础知识

· Vue收集表单数据

· Vue 数据绑定单向绑定与双向绑定

· Vue中有两种数据绑定的方式：

· Vue 2x 系列之（四）数据绑定

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决

公告

昵称：小罗要有出息
园龄： 3年2个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

小罗要有出息

数据绑定

单项绑定（v-bind）

双向绑定（v-model）

备注

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	1. 双向绑定一般应用在表单类上，（如：input,select等）
	2.v-model:value 可以简写成 v-model 因为v-model默认收集的就是value的值

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数据绑定</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
	<div id="root">
	<!-- 普通写法 -->
	单向绑定: <input type="text" v-bind:value="name"><br>
	双向绑定：<input type="text" v-model:value="name">
	<!-- 简写 -->
	单向绑定: <input type="text" :value="name"><br>
	<!-- v-model默认就是绑定value的值 -->
	双向绑定：<input type="text" v-model="name">
	</div>
	<script>
	Vue.config.productionTip = false;
	new Vue({
	el:"#root",
	data:{
	name:"刘123",
	}
	})
	</script>
	</body>
	</html>