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>
相关推荐
Kayshen5 分钟前
我在设计工具里实现了一个 Agent Team:多智能体协作生成 UI 的实战经验
前端·aigc·agent
swipe17 分钟前
深入理解 JavaScript 中的 this 绑定机制:从原理到实战
前端·javascript·面试
Json_Lee18 分钟前
2026 年了,多 Agent 编码该怎么选?agent-team vs Claude Agent Teams vs Claude Squad vs Met
前端·后端·vibecoding
Novlan121 分钟前
Stepper 小数输入精度丢失 Bug 修复
前端
陈随易26 分钟前
刚上市就断货?如此火爆的编程显示器到底有什么魔力
前端·后端·程序员
兆子龙40 分钟前
前端哨兵模式(Sentinel Pattern):优雅实现无限滚动加载
前端·javascript·算法
豆苗学前端1 小时前
彻底讲透浏览器渲染原理,吊打面试官
前端·javascript·面试
踩着两条虫1 小时前
AI 驱动的 Vue3 应用开发平台 入门指南(五):创建 H5 移动应用
前端·vue.js·ai编程
ZengLiangYi1 小时前
用 AudioContext.suspend()/resume() 作为流式音视频的同步门控
前端·音视频开发
进击的尘埃1 小时前
可视化搭建引擎的撤销重做系统:Command 模式 + Immutable 快照实现操作历史树
javascript