vue的bind练习

最新推荐文章于 2025-04-08 14:42:42 发布

liu1992452008

最新推荐文章于 2025-04-08 14:42:42 发布

阅读量463

点赞数

分类专栏： vuejs

本文链接：https://blog.youkuaiyun.com/liu1992452008/article/details/78568687

版权

vuejs 专栏收录该内容

34 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
				<script type="text/javascript" src="vue.js" ></script>

	</head>
    <style type="text/css">
    	.active{
    		background-color:orange;
    		font-size: 20px;
    		color: #fff;
    	}
    </style>
	<body>
		<div id="app">
	        <p v-for="(college, index) in colleges" :class="index=== indexActive?'active':''">
	        	   {{college}}
	        </p>
           <p :style="{color:fontColor}">今天天气很好</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
				
                    colleges:[
                    'ios学院','java学院','HTML学院','UI学院','VR学院'],
                    indexActive:3,
                    fontColor:'red'
				}
			})
		</script>
	</body>
</html>