您的位置: 首页  >  文章  >  vue的简单使用2

vue的简单使用2

分类: 文章 • 2023-12-03 20:39:52

通过Vue使用样式

在Vue中使用class样式（给元素添加class，下面我会全部写成绑定class）

vue:

let vue1 = new Vue({
            el: "#head",
            data: {
                bool: false
            }
        });

  1. 数组

    使用数组的方式给元素添加class

    //	<style>
//     .a {
//       background-color: red;
//     }
//     .b {
//       font-size: 3em;
//     }
//  </style>
<div v-bind:class="['a','b']">hello</div>

    这样就给这个div绑定了class a和class b.

  2. 三元表达式

    在数组中使用三元表达式

    <div v-bind:class="['a', bool?'b':'c']">hello2</div>

    如果bool为true的时候，给这个div绑定class b,为false的时候绑定class c。true为一个表达式或者true、false

  3. 数组中嵌套对象

    可以通过数组嵌套对象的方式来绑定。

    <div v-bind:class="['a', {'b' : bool}]">hello3</div>

    因为bool的值为false,所以就会给上面的元素绑定class a,如果将bool的值设为true，则会绑定class a和class b

  4. 直接使用对象

    可以直接使用对象来进行绑定class

    <div v-bind:class="{'a': true, 'b': false, 'c': bool}">hello4</div>

    这样就给上面的元素绑定了class a,没有绑定class b,因为bool的值为false，所以没有绑定class c

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="libs/vue.js"></script>
    <style>
        .a {
            background-color: red;
        }

        .b {
            font-size: 3em;
        }

        .c {
            font-size: 6em;
        }
    </style>
</head>
<body>
<div id="head">
    <div v-bind:class="['a','b']">hello</div>
    <div v-bind:class="['a', bool?'b':'c']">hello2</div>
    <div v-bind:class="['a', {'b' : bool}]">hello3</div>
    <div v-bind:class="{'a': true, 'b': false, 'c': bool}">hello4</div>
</div>
<script>
    let vue1 = new Vue({
        el: "#head",
        data: {
            bool: false
        }
    });
</script>
</body>
</html>

在Vue中使用内联样式

  1. 直接使用:style的方式

    注意{}中的键（属性）：如果键中没有‘-’的话可以不加单引号，例如color。如果键中有‘-’则需要加单引号，例如‘font-size’

    <div id="head">
    <div :style="{'font-size': '3em', color: 'red'}">床前明月光</div>
</div>
<script>
   	let vue1 = new Vue({
        el: "#head"
    });
</script>

    这样就给上面的div设置了3em、红色的字体

  2. 从data中获取单个样式对象

    <div id="head">
    <!--<div :style="{'font-size': '3em', color: 'red'}">床前明月光</div>-->
    <div :style="style1">疑似地上霜</div>
</div>
<script>
    let vue1 = new Vue({
        el: "#head",
        data: {
            style1: {'font-size': '3em', color: 'red'}
        }
    });
</script>

    将样式对象定义在Vue对对象中的data中，然后在:style中直接使用就可以了

  3. 从data中获取单个样式对象

    <div id="head">
    <!--<div :style="{'font-size': '3em', color: 'red'}">床前明月光</div>-->
    <!--<div :style="style1">疑似地上霜</div>-->
    <div :style="[style1, style2]">举头望明月</div>
</div>
<script>
    let vue1 = new Vue({
        el: "#head",
        data: {
            style1: {'font-size': '3em', color: 'red'},
            style2: {'font-style': 'italic'}
        }
    });
</script>

    在data中定义了两个样式对象，然后利用数组的方式引用就可以了

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="libs/vue.js"></script>
</head>
<body>
<div id="head">
    <div :style="{'font-size': '3em', color: 'red'}">床前明月光</div>
    <div :style="style1">疑似地上霜</div>
    <div :style="[style1, style2]">举头望明月</div>
</div>
<script>
    let vue1 = new Vue({
        el: "#head",
        data: {
            style1: {'font-size': '3em', color: 'red'},
            style2: {'font-style': 'italic'}
        }
    });
</script>
</body>
</html>

运行截图：
vue的简单使用2

相关推荐