vue-例3-11v-bind数组表达式.html

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

Vue 专栏收录该内容

661 篇文章

订阅专栏

该示例展示了在Vue.js中如何使用数组表达式和三元运算符来动态地绑定HTML元素的class属性。通过`v-bind:class`指令，结合数据属性`isActive`，实现了`activeClass`和`errorClass`的切换，从而改变元素的背景色或文字颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组表达式绑定</title>
</head>
<body>
    <h1>绑定class属性，采用数组表达式</h1>
    <div id="app">
        <div v-bind:class="[activeClass,errorClass]">直接数组方式</div>
        <div v-bind:class="[isActive ? activeClass : '']">三元表达式</div>
        <div v-bind:class="[{active:isActive},errorClass]">混合使用</div>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                isActive:true,
                activeClass: 'active',
                errorClass: 'textDanger'
            }
        })
    </script>

    <style>
        .active{
            background-color: lightblue;
        }

        .textDanger{
            color: red;
        }
    </style>
</body>
</html>