vue.js：使用v-bind通过数组绑定多个class案例

最新推荐文章于 2024-07-06 21:38:14 发布

零小唬

最新推荐文章于 2024-07-06 21:38:14 发布

阅读量564

点赞数 2

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_55804957/article/details/128474053

版权

Vue.js 专栏收录该内容

109 篇文章 2 订阅

订阅专栏

此案例的主要功能：
该案例主要通过使用数组设置v-bind:class的属性值，实现为一个元素来设置多中不同的效果，具体案例效果如下，改选子集需要渲染的样式即可对文本进行样式渲染。

具体的代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用v-bind通过数组绑定多个class案例</title>
  <script src="../BLBL笔记/lib/vue.min.js"></script>
  <style>
    .myClass1{
      font-style: italic;
    }
    .myClass2{
      text-decoration: underline;
    }
    .myClass3{
      font-family: "隶书";
    }
  </style>
</head>
<body>
  <div id="app">
    <label><input type="checkbox" v-model = "myChecked1">斜体</label>
    <label><input type="checkbox" v-model = "myChecked2">下划线</label>
    <label><input type="checkbox" v-model = "myChecked3">隶书</label>
    <br /><br />
    <div v-bind:class="[myChecked1?'myClass1':'',myChecked2?'myClass2':'',myChecked3?'myClass3':'']">
      <h3>入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极</h3>
    </div>
  </div>
  <script>   
    var app = new Vue({
      el:"#app",
      data:{
        myChecked1:false,
        myChecked2:false,
        myChecked3:false
      }
    })
  </script>
</body>
</html>

也可以把class样式类myClass定义为Vue实例中的一个数据属性也可以实现此效果，具体实现代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用v-bind通过数组绑定多个class案例</title>
  <script src="../BLBL笔记/lib/vue.min.js"></script>
  <style>
    .myClass1{
      font-style: italic;
    }
    .myClass2{
      text-decoration: underline;
    }
    .myClass3{
      font-family: "隶书";
    }
  </style>
</head>
<body>
  <div id="app">
    <label><input type="checkbox" v-model = "myChecked1">斜体</label>
    <label><input type="checkbox" v-model = "myChecked2">下划线</label>
    <label><input type="checkbox" v-model = "myChecked3">隶书</label>
    <br /><br />
    <div v-bind:class="[myChecked1?myClassA:'',myChecked2?myClassB:'',myChecked3?myClassC:'']">
      <h3>入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极</h3>
    </div>
  </div>
  <script>   
    var app = new Vue({
      el:"#app",
      data:{
        myChecked1:false,
        myChecked2:false,
        myChecked3:false,
        myClassA:'myClass1',
        myClassB:'myClass2',
        myClassC:'myClass3'
      }
    })
  </script>
</body>
</html>