[vue] Vue数据绑定

最新推荐文章于 2024-07-07 14:39:11 发布

533_

最新推荐文章于 2024-07-07 14:39:11 发布

阅读量447

点赞数

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

本文链接：https://blog.csdn.net/qq_14993591/article/details/121077695

版权

vue 专栏收录该内容

162 篇文章 3 订阅

订阅专栏

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

1. 单向绑定(v-bind)： 数据只能从data流向页面。

2. 双向绑定(v-model)： 数据不仅能从data流向页面，还可以从页面流向data。

备注：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}学习1</a>
			<a :href="school.url">点我去{{school.name}}学习2</a>
		</div>
	</body>
 
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
 
		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'百度',
					url:'http://www.baidu.com',
				}
			}
		})
	</script>
</html>

533_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[vue] Vue数据绑定

Vue中有2种数据绑定的方式：1. 单向绑定(v-bind)：数据只能从data流向页面。2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。备注：双向绑定一般都应用在表单类元素上（如：input、select等）v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。<!DOCTYPE html><html> <head> <meta chars
复制链接

扫一扫

专栏目录