2 Vue使用v-bind来代替{{}}取值

注意!当两个具有共同id的标签都要从数据层拿值时,需要使用div标签,赋予他们共同的id,不然其中有一个会拿不到数据!

v-bind用来绑定前标签的属性,然后对属性赋值。{{}}用来对前后标签中的文本赋值。使用方法分别是:v-bind:属性名="key"以及{{key}}。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- view层 -->
		<div id="app">
			<span v-bind:title="message">123</span>
			<h1>{{message}}</h1>
		</div>
	
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
		var vm = new Vue({
			el: "#app",
			data: {
				message: "hello"
			}
		});
		</script>
	</body>
</html>
相关推荐
奶昔不会射手5 分钟前
自定义vue3函数式弹窗
前端·javascript·css
new code Boy12 分钟前
前端全栈之路
前端
牛奶26 分钟前
为什么敲几个字母就能访问网站?DNS原理大揭秘
前端·http·dns
wuhen_n29 分钟前
破冰——建立我们的AI开发实验环境
前端·javascript
HelloReader32 分钟前
Flutter 自适应布局一套代码适配手机和平板(十二)
前端
牛奶35 分钟前
HTTP裸奔,HTTPS穿盔甲——它们有什么区别?
前端·http·https
梓言38 分钟前
tailwindcss构建执行npm exec tailwindcss init -p 报错
前端
哈罗哈皮38 分钟前
龙虾(openclaw)本地快速安装及使用教程
前端·aigc·ai编程
用户231154445305839 分钟前
React中实现“双向绑定”效果的几种方式
前端
HelloReader40 分钟前
Flutter Sliver 高级滚动打造 iOS 通讯录体验(十三)
前端