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 分钟前
Cursor最近变傻了?
前端
码字小学妹15 分钟前
Claude Opus 4.7 接入指南(2026):国内配置 + xhigh 推理 + 成本计算
前端
小赵同学WoW17 分钟前
插槽【vue2】与 【vue3】对比
前端
代码随想录17 分钟前
Agent大厂面试题汇总:ReAct、Function Calling、MCP、RAG高频问题
前端·react.js·前端框架
前端那点事18 分钟前
Vue响应式原理|从底层实现到面试考点,一文吃透(Vue2+Vue3全解析)
前端·vue.js
walking95719 分钟前
Vite 打包优化终极指南:从 30MB 到 800KB 的性能飞跃
前端·vue.js·vite
Highcharts.js20 分钟前
在 React 中使用 useState 和 @highcharts/react 构建动态图表
开发语言·前端·javascript·react.js·信息可视化·前端框架·highcharts
梓言20 分钟前
解决 Element Plus 中 Tooltip 样式影响全局菜单(Menu)及宽度控制失效的完美方案
前端·css·element
小蜜蜂dry24 分钟前
css变量
前端·css
|晴 天|1 小时前
Vue 3 实战:打造可拖拽歌词、播放列表的嵌入式音乐播放器
前端·javascript·vue.js