vue学习笔记（一）---- vue指令（在vue中使用样式的方式）

最新推荐文章于 2024-03-01 19:45:58 发布

杨贵妃会飞飞飞

最新推荐文章于 2024-03-01 19:45:58 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue学习笔记文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_45103612/article/details/109121668

Vue学习笔记专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了在Vue中如何使用不同方式绑定样式，包括数组方式、三元表达式、对象语法以及行内样式。通过示例代码展示了如何根据数据动态地改变元素的样式，以及如何通过对象和数组结合的方式来更清晰地管理类名。同时，还演示了如何通过数据驱动来切换元素的样式状态，提升代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

认真学习，认真记录，每天都要有进步呀！！！
加油叭！！！

一、在vue中使用样式的方式:

1. 直接传递一个数组，注意：这里的 class 需要使用 v-bind 做数据绑定

<style>
    .red {
      color: red;
    }
    .thin {
      font-weight: 200;
    }
    .italic {
      font-style: italic;
    }
    .active {
      letter-spacing: 0.5em;
    }
  </style>

<body>
  <div id="app">
    <h1 :class="['red','thin','italic']">好饿好饿我好饿,不吃不吃我不吃</h1>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
      },
      methods: {}
    });
  </script>
</body>

在这里插入图片描述

2. 使用三元表达式去决定是否添加样式

<h1 :class="[isred?'red':'','thin','italic','active']">好饿好饿我好饿,不吃不吃我不吃</h1>
<!--    //data身上的东西在被控制的元素中可以直接就调用-->

var vm = new Vue({
  el: '#app',
  data: {
   isred:false
        },
  methods: {}
    });

在这里插入图片描述

用 input 的点击事件来改变样式:

<input type="button" value="变红" @click="isred=true"/>
    <h1 :class="[isred?'red':'','thin','italic','active']">好饿好饿我好饿,不吃不吃我不吃</h1>

在这里插入图片描述

3.在数组中使用对象来代替三元表达式，数组中嵌套对象，提高代码的可读性

<h1 :class="[{red:true},'thin','italic','active']">好饿好饿我好饿,不吃不吃我不吃</h1>

4.直接使用对象，传递对象作为类样式

在为 class 使用 v-bind 绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以这里我没写引号, 属性的值是一个标识符

<h1 :class="{red: true,thin: true,italic: true,active:false}">好饿好饿我好饿,不吃不吃我不吃</h1>

也可写成一个数组对象的方式

<h1 :class="classObj">好饿好饿我好饿,不吃不吃我不吃</h1>

var vm = new Vue({
  el: '#app',
  data: {
  flag: true,
  classObj: { red: true, thin: true, italic: false, active: false }
      },
  methods: {}
    });

来吧展示:

在这里插入图片描述

二、在vue中书写行内样式

<body>
  <div id="app">
    <!-- 对象就是无序键值对的集合 -->
    <!-- <h1 :style="styleObj1">这是一个h1</h1> -->
    <h1 :style="[ styleObj1, styleObj2 ]">呜呜呜,感冒啦,阿秋</h1>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj1: { color: 'pink', 'font-weight': 200 },
        styleObj2: { 'font-style': 'italic' }
      },
      methods: {}
    });
  </script>
</body>

</html>