常用指令v-bind基本使用方法

最新推荐文章于 2022-09-13 22:39:13 发布

夏木炎

最新推荐文章于 2022-09-13 22:39:13 发布

阅读量517

点赞数

分类专栏： Vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/xm393392625/article/details/80986563

版权

Vue学习笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一.案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用指令v-bind</title>
		<style>
			.active{
				background-color: plum;
				font-size: 20px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--绑定属性-->
			<img v-bind:src="srcImg" />
			<!--缩写方式-->
			<img :src="srcImg" />
			<!--动态绑定样式-->
			<p v-for="(col,index) in colleges" :class="index == 2 ? 'active':''">
				{{col}}
			</p>
			<p :style="{color:fontColor}">今天适合写代码</p>
		</div>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			//1.创建Vue的实例
			let vm=new Vue({
				el:'#app',
				data:{
					srcImg:'img/pet001_640x340.jpg',
					colleges:[
						'中山大学',
						'华南理工大学',
						'厦门大学',
						'中央戏剧学院',
						'武汉大学',
						'暨南大学',
						'华南农业大学'
					],
					fontColor:'red'
				}
			});
		</script>
	</body>
</html>

二.结果

夏木炎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用指令v-bind基本使用方法

一.案例代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;常用指令v-bind&lt;/title&gt; &lt;style&gt; .active{ background-color: plum; font
复制链接

扫一扫