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

本文详细介绍了在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>

来吧展示:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值