Vue点击动态添加删除active类特效

关注

转载最新推荐文章于 2026-09-01 14:53:47 发布 2.3k 阅读 AI 写同款· GEO 优化 ›

Unity URP高性能渲染实战：构建赛博朋克场景与性能优化实时图形渲染是计算机图形学的核心领域，它致力于在毫秒级时间内生成连续图像。其原理涉及GPU管线处理顶点、片段着色及光照计算，技术价值在于为游戏、虚拟现实等提供沉浸式视觉体验。在追求电影级画质的应用场景中，开发者常面临性能与保真度的平衡挑战。本文聚焦于使用Unity通用渲染管线（URP），通过实战讲解如何构建赛博朋克风格的高压渲染场景，并深入剖析性能优化策略。内容涵盖基于物理的渲染（PBR）材质制作、实时全局光照配置以及计算着色器的高效应用，旨在帮助开发者掌握从视觉实现到性能“驯服”的完整工作流。阅读详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <script src="jquery-1.11.0.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        .classred{
            color:red;
        }
        .classred:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <ul class="list">
        <li v-for="(item,index) in liList" @click="addClass(index)" :class="{classred:index==current}" >{{item.title}}</li>
    </ul>
</div>
<script src="./vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            name:'叶落森',
            current:0,
            liList:[
                {title:'叶落森1'},
                {title:'叶落森2'},
                {title:'叶落森3'},
                {title:'叶落森4'}
            ]
        },
        methods:{
            addClass:function(index){
                this.current=index;
            }
        },
    })
</script>
</body>

</html>

原文地址:https://blog.youkuaiyun.com/xiasohuai/article/details/80749931

收录于