点击 显示红色 小案例 vue
2024-09-05 03:06:10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js" type="text/javascript"></script>
<style type="text/css">
.active{
color: red;
}
</style>
</head>
<body>
<!--修饰符-->
<div id="app">
<ul>
<li v-for="(item ,index) in items" :class="{active:currentIndex===index}" @click="lilick(index)">{{item}}</li>
</ul>
</div> <script>
const app=new Vue({
el:'#app',
data:{
message:"hello" ,
items:[ "haha",
'asda',
'asdfasd',
'asddddd'],
currentIndex:-1
},
methods:{
lilick(index){
this.currentIndex=index;
}
} }) </script>
</body>
</html>
最新文章
- IOS UIImageView的contentMode属性
- pyhon——进程线程、与协程基础概述
- C语言中两种方式表示时间日期值time_t和struct tm类型的相互转换
- SQL Server ---(CDC)监控表数据(转译)
- 在CentOS中快速安装PHP,MySQL,Nginx和phpMyAdmin
- 【HDU】2138 How many prime numbers
- 关于block的一些理解
- Cocos2d-x3.x塔防游戏(保卫萝卜)从零开始(三)
- [转]为何TCP/IP协议栈设计成沙漏型的
- Windows8下通过IPv4地址访问Tomcat
- Spring BeanFactoryPostProcessor
- T-SQL动态查询(2)——关键字查询
- Mac homebrew-1.5以后安装php扩展的方法
- Actions对Element的一些操作解析
- Maven 包含资源文件
- pandas 常用清洗数据(一)
- IIS 站点部署多级域名
- 【Android】Sensor框架Framework层解读
- JavaScript - this详解 (一)
- Delphi xe7 up1 调用android振动功能