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>
相关推荐
pas1364 分钟前
47-mini-vue 升级monorepo管理项目
前端·javascript·vue.js
浮桥7 分钟前
uniapp + h5 -- 简易抽奖转盘组件(文字版)
前端·javascript·uni-app
Swift社区13 分钟前
Flutter 中如何优雅地处理复杂表单
前端·flutter·前端框架
这是个栗子15 分钟前
前端开发中的常用工具函数(三)
前端·javascript·charat
慧一居士15 分钟前
Vite 常用插件详解与使用指南
前端
切糕师学AI17 分钟前
JavaScript 中 == 和 === 的区别
javascript·js语法
之歆17 分钟前
Vue3 + Vite2.0 全栈开发实践:从零到一构建通用后台管理系统-下
javascript·vue.js·vue3
zhougl99617 分钟前
前端UI框架
前端·ui
love530love9 小时前
Scoop 完整迁移指南:从 C 盘到 D 盘的无缝切换
java·服务器·前端·人工智能·windows·scoop
i220818 Faiz Ul9 小时前
计算机毕业设计|基于springboot + vue鲜花商城系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计