9 数组点击效果案例

最新推荐文章于 2024-07-20 15:12:49 发布

xuhuimingc

最新推荐文章于 2024-07-20 15:12:49 发布

阅读量65

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/xuhuimingc/article/details/115325593

版权

vue 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

                    
                        
                    
                     
 <style>
   .active{
       font-size:x-large;
   }
</style>

<body>

<div id="app">
   <!--key的作用主要是为了高效的更新虚拟DOM-->
   <li v-for="(item,index) in names" :class="{active:currentIndex === index}" @click="liClick(index)">{{item}}</li>
</div>

<script src="../js/vue.js"></script>
<script>
const app=new Vue({
 el:'#app',
 data:{
   names:['xhm','kobe','james','curry'],
   currentIndex:0
 },
 computed:{
 },
 methods:{
   liClick(index){
     this.currentIndex=index
   }
 }
})

</script>
 

                