vue-如何动态切换class

基础语法


vue讲的很详细在此不再叙述


    <div id="app1">
        <ul>
            <li v-for="(item, index) in items" :class="{'active': isActive == index}" @click="handleActive(index)">{{ item }}</li>
        </ul>
    </div>
    <script>
        var app1 = new Vue({
            el: "#app1",
            data: {
                items: ['q','w'],
                isActive: 0
            },
            methods: {
                handleActive: function(index) {
                    this.isActive = index;
                }
            }
        });
    </script>

着重理解v-bind:class是接受了一个对象,'active'是类名,第二个参数可以是一个表达式或者一个数据属性为boolean类型的值,如果为true则绑定class

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,639评论 0 6
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • DevDocs.io 很棒, 通过简单但功能强大的搜索功能,您可以浏览很多框架,库和技术。 另一个很好的功能是您可...
    Devid阅读 1,343评论 0 0
  • 盛夏之夜,我和先生打完球准备回家,走到体育馆门前的大阶梯,阵阵凉风拂面而过,清爽无比,我们不约而同地驻足示意对方停...
    暖暖的魔羯麻麻阅读 237评论 0 0