6 - Vue 学习笔记 - v-bind的基本使用

最新推荐文章于 2024-08-26 11:29:33 发布

0rigami

最新推荐文章于 2024-08-26 11:29:33 发布

阅读量235

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/m0_53708566/article/details/117780399

版权

本文详细介绍了Vue中的v-bind指令，包括其基本使用、动态绑定class和style的多种语法，如对象语法和数组语法。通过v-bind，可以实现属性的动态绑定，例如动态绑定a元素的href和img的src。对于class，可以绑定对象或数组来根据条件切换样式；对于style，可以绑定对象或数组来设置内联样式。

摘要由CSDN通过智能技术生成

在某些情况下，除了内容需要动态来决定外，某些属性也希望动态绑定

比如动态绑定 a 元素的 href 属性

比如动态绑定 img 的src 属性
这个时候，可以使用 v-bind 指令:

v-bind

作用：动态绑定属性
缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)

基本使用

<div id="app">
	<!-- <img src="{
   {imgURL}}" alt=""> -->
	<!-- 错误写法，会直接将 mustache 语法解析为 string	-->
	<!-- mustache 是在内容(content)中使用的	-->
	
	<!-- 正确做法：使用 v-bind指令	-->
	<img v-bind:src="imgURL" alt="">
	<!-- 这时 imgURL 已经是一个变量，而不是一个字符串常量	-->
	<a v-bind:href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
     
		el: "#app",
		data: {
     
			message: "hello",
			imgURL: "E:\\image.jpg",
			aHref: "https://www.baidu.com"
		}
	});
</script>