欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue的一个小例子2021.7.21

程序员文章站 2022-03-28 11:17:39
...

是一个v-for,v-on:click,v-bind的结合体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.red{
				color: red;
			}
		</style>
	</head>
	<body>
		<ul id="aaa">
			<li v-for="(item,index) in fruit" 
			:class="{red:currentindex===index} "
				@click="change(index)">
				{{item}}.{{index}}</li>
		</ul>
		<script type="text/javascript" src="../vue.js"></script>
		<script type="text/javascript">
			const aaa=new Vue({
				el:'#aaa',
				data:{
					real:true,
					fruit:['apple','banana','orange','peach'],
					currentindex:0
				},
				methods:{
					change(index){
						this.currentindex=index
					}
				}
			})
		</script>
	</body>
</html>

相关标签: vue