v-bind初步了解

最新推荐文章于 2024-06-24 08:00:00 发布

追星星の人

最新推荐文章于 2024-06-24 08:00:00 发布

阅读量299

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/yuan_21/article/details/106739641

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-bind和mustache（双大括号）区别

两者的作用都是将Vue实例中数据与Dom中元素内容绑定起来，但具体绑定内容不同。mustache语法绑定元素中间的内容处，如：<h1>这里绑定数据</h1>;v-bind主要绑定元素的属性值，如<a v-bind:href="数据名"></a>,或v-bind语法糖写法：<a :href="数据名"></a>，即将v-bind：用“：”代替。

v-bind实例，动态绑定img和a的属性

`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
	<img v-bind:src='imgURL' alt="">
	<a v-bind:href='aHref'>百度一下</a>
	<img :src='imgURL' alt=""><!-- 语法糖写法，即“v-bind:”用“:”代替 -->
	<a :href='aHref'>百度一下</a><!-- 语法糖写法，即“v-bind:”用“:”代替 -->
</div>
<script src="../js/vue.js"></script>
<script>
		const app = new Vue({
			el:'#app',//挂载要管理的元素
			data:{
				imgURL:'https://cbu01.alicdn.com/cms/upload/2020/566/736/16400637665.jpg',
				aHref:'http://www.baidu.com'
			}	
		})
</script>
</body>
</html>`

追星星の人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-bind初步了解

v-bind和mustache（双大括号）区别两者的作用都是将Vue实例中数据与Dom中元素内容绑定起来，但具体绑定内容不同。mustache语法绑定元素中间的内容处，如：<h1>这里绑定数据</h1>;v-bind主要绑定元素的属性值，如<a v-bind:href="数据名"></a>,或v-bind语法糖写法：<a :href="数据名"></a>，即将v-bind：用“：”代替。v-bind实例，动态绑定img和a的属性
复制链接

扫一扫

专栏目录