Vue中的v-blind指令

最新推荐文章于 2023-10-23 20:18:09 发布

朱振玉小迷弟

最新推荐文章于 2023-10-23 20:18:09 发布

阅读量2.2k

点赞数 2

分类专栏： Vue学习笔记（带源码）文章标签： vue javascript css html html5

本文链接：https://blog.csdn.net/weixin_50357864/article/details/114822027

版权

Vue学习笔记（带源码）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、了解v-blind

v-blind的主要用法是动态更新HTML元素上的属性。

二、调用图片地址

下面是先通过el挂载点挂在一个数据（图片的地址），然后通过v-blind调用图片地址。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind</title>
	</head>
	<body>
		<div id="app">
			<img v-bind:src="imgSrc" alt="" />
			<br />
			<img :src="imgSrc" alt="" />			<--“v-blind：”的缩写是“：”-->
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					imgSrc:"https://www.itheima.com/images/logo.png"
					imgTitle:"黑马程序员"
				}
			})
		</script>
	</body>
</html>

三、调用title

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-blind</title>
	</head>
	<body>
		<div id="app">
			<img v-bind:src="imgSrc" alt="" />
			<br />
			<img :src="imgSrc" alt="" :title="imgTitle"/>			<!--“v-blind：”的缩写是“：”-->
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					imgSrc:"https://www.itheima.com/images/logo.png", 	<!--注意这里的逗号别忘了！！！-->
					imgTitle:"黑马程序员"
				}
			})
		</script>
	</body>
</html>

四、调用class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-blind</title>
		<style>
			.active{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img v-bind:src="imgSrc" alt="" />
			<br />
			<img :src="imgSrc" alt="" :title="imgTitle"/>			<!--“v-blind：”的缩写是“：”-->
			<br />
			<img :src="imgSrc" alt="" :title="imgTitle" :class="{active:isActive}"@click="toggleActive"/>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					imgSrc:"https://www.itheima.com/images/logo.png",
					imgTitle:"黑马程序员",
					isActive:false
				},
				methods:{
					toggleActive:function(){
						this.isActive = !this.isActive;
					}
				}
			})
		</script>
	</body>
</html>

有用的话点个赞~

朱振玉小迷弟

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue中的v-blind指令

一、了解v-blindv-blind的主要用法是动态更新HTML元素上的属性。二、调用图片地址下面是先通过el挂载点挂在一个数据（图片的地址），然后通过v-blind调用图片地址。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-blind</title> </head> <body> <div id="ap
复制链接

扫一扫