Vue点击显示不同的图片

*使用Vue中的以下知识点来显示效果①：v-for：循环遍历数据②：v-bind:class={}：绑定样式③： v-on:click（简写@click）：点击事件④： v-if：判断&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&am

潔19

2772人浏览 · 2019-02-26 18:14:13

潔19 · 2019-02-26 18:14:13 发布

使用Vue中的以下知识点来显示效果
①：v-for：循环遍历数据
②：v-bind:class={ }：绑定样式
③：v-on:click（简写@click）：点击事件
④：v-if：判断

<!DOCTYPE html>
<html>
<head>
	<title>点击显示相对应的图片</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.myul{
			display: flex;
		}
		.myul li{
			border: 1px solid orange;
			height: 150px;
			width: 150px;
			flex-direction: row;
			text-align: center;
			line-height: 150px;
		}
		.content{
			border: 1px solid grey;
			height: 350px;
			width: 600px;
		}
		.content img{
			height: 350px;
			width: 600px;
		}
		.active{
			background: #3A9ffb;
			color: white;
		}
	</style>
</head>
<body>
	<div class="app">
		<div class="title">
			<ul class="myul">
				<li v-for="(item,index) in mess" v-bind:class="{ 'active': status === index}" v-on:click="changeImg(index)">
					{{item.content}}
				</li>
			</ul>
		</div>
		<div class="content">
			<img src="img/1.jpg" v-if="status === 0">
			<img src="img/2.jpg" v-if="status === 1">
			<img src="img/84.jpg" v-if="status === 2">
			<img src="img/85.jpg" v-if="status === 3">
		</div>
	</div>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:".app",
		data:{
			status:0,   //状态显示
			mess:[
				{id:0,content:"点击显示图片一"},
				{id:1,content:"点击显示图片二"},
				{id:2,content:"点击显示图片三"},
				{id:3,content:"点击显示图片四"}
			]
		},
		methods:{
			changeImg:function(index){
				this.status=index;
			}
		}
	})
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^