2-vue-动态绑定属性

最新推荐文章于 2024-08-26 00:20:00 发布

新手小白请求出战！

最新推荐文章于 2024-08-26 00:20:00 发布

阅读量230

点赞数

分类专栏：前端笔记文章标签： javascript html5 vue.js css css3

本文链接：https://blog.csdn.net/qq_41138726/article/details/109626975

版权

本文详细介绍了如何在Vue.js中使用v-bind动态绑定class属性，包括对象语法和数组语法的应用，通过实例展示了如何根据条件改变元素的样式。

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

1.v-bind动态绑定class属性的对象语法

点击按钮可以转化颜色


    <style>
        .active {
            color: red;
        }
    </style>



    <div id="app">
        <!-- <h2 class="active">{
  {message}}</h2>
        <h2 :class="active">{
  {message}}</h2> -->
        <!-- <h2 :class="{key1:value1,key2:value2}">{
  {message}}</h2> -->
        <!-- <h2 :class="{类名1:boolean,类名2:boolean}">{
  {message}}</h2> -->
        <!-- 这里单独的class可以进行合并 前者表示静态 后者表示动态 -->
        <h2  class="title" :class="{active:isActive,line:isLine}">{
  {message}}</h2>
       <button v-on:click="btnClick">按钮</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vu