Vue学习---实现点击文本改变样式的功能

最新推荐文章于 2024-08-18 12:57:03 发布

胆小鬼vs

最新推荐文章于 2024-08-18 12:57:03 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js html

本文链接：https://blog.csdn.net/m0_54020832/article/details/125778562

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文是一个Vue.js的基础练习示例，通过创建一个列表，利用v-for遍历数组并展示文本，同时应用`:class`指令实现点击元素样式变化。点击每个列表项时，`@click`事件会触发`liClick`方法，更新当前选中项的样式。这个例子展示了Vue的响应式数据绑定、事件处理和动态类的应用。

摘要由CSDN通过智能技术生成

一个简单的vue入门的小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>{{message}}</h1>
<!--点击哪个文本那个文本的样式发生改变
     v-for:用户遍历数组，并获取其数组元素的下标
     :class：记录当前文本的样式改变
     @click:点击事件-->
    <ul>
        <li v-for="(m,index) in list"
            :class="{active:currentIndex === index}"
            @click="liClick(index)">{{index}}.{{m}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"hello!",
            list:['lihaihai','linjinyun','zzzzz'],
            currentIndex:0    //当前文本
        },
        methods:{
            liClick(index){      //点击事件--根据将所点击的元素下标index赋值currentIndex来改变所点击文本的样式的改变
                this.currentIndex=index
            }
        }
    })
</script>

</body>
</html>

实现的结果显示：