vue如何在元素上新增样式

发布时间：2023-07-13 12:00:24 所属栏目：教程来源：互联网

导读： 　　这篇文章主要介绍“vue如何在元素上增加样式”，在日常操作中，相信很多人在vue如何在元素上增加样式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对

这篇文章主要介绍“vue如何在元素上增加样式”，在日常操作中，相信很多人在vue如何在元素上增加样式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue如何在元素上增加样式”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　增加方法：1、用“:class="['类名']”语句添加；2、用“:class="['类名1','类名2',{属性名(类名):'属性值(true或false)}]"”语句；3、用“:class="{属性名(类名):true}”语句；4、用“:style="{'样式名':'样式值'}"”语句；5、用“:style="样式"”语句增加；6、用“:style="[data]"”语句。

　　vue中的添加样式

　　一、使用class样式：

　　类名必须用引号引起来；

　　1、数组

　　<h2 :class = "['类名1','类名2']">这种方法需要用 v-bind: => : 绑定</h2>

　　2、数组中使用三元表达式

　　<h2 :class = "['类名1','类名2',表达式?'类名3':'']">这种方法需要用 v-bind: => : 绑定</h2>

　　3、数组中嵌套对象

　　<h2 :class = "['类名1','类名2',{属性名(类名):'属性值(true或false)}]">这种方法需要用 v-bind: => : 绑定</h2>

　　4、直接适用对象

　　<h2 :class = "{属性名(类名1):true,属性名(类名2):true}">这种方法需要用 v-bind: => : 绑定</h2>

　　二、使用内联样式；

　　1、直接在元素上通过 :style 的形式

　　<h2 :style = "{'样式名':'样式值'}">这种方法需要用 v-bind: => : 绑定</h2>

　　2、将样式对象，定义到data 中，在引用到 :style 中

　　<h2 :style = "vue里的样式">这种方法需要用 v-bind: => : 绑定</h2>

　　3、在 :style 中通过数组，引用多个 data 上的样式对象；

　　<h2 :style = "[data1,data2]">这种方法需要用 v-bind: => : 绑定</h2>

　　代码实例：

　　<!DOCTYPE html>

　　<html lang="en">

　　<head>

　　    <meta charset="UTF-8">

　　    <meta name="viewport" content="width=device-width, initial-scale=1.0">

　　    <meta http-equiv="X-UA-Compatible" content="ie=edge">

　　    <title>Vue样式的运用</title>

　　    <style>

　　        * {

　　            margin: 0;

　　            padding: 0;

　　        }

　　        .box {

　　            width: 150px;

　　            height: 150px;

　　            background: skyblue;

　　            line-height: 150px;

　　            text-align: center;

　　        }

　　        .border {

　　            border-radius: 50%;

　　        }

　　        .color {

　　            color: #fff;

　　            font-size: 24px;

　　        }

　　    </style>

　　</head>

　　<body>

　　    <div id="app">

　　        <button @click="tagger = !tagger">切换</button>

　　        

　　        

　　        

　　

　　        

　　        

　　

　　        

　　        <div :class="tagger ? ['box','border'] : ['box']">添加style样式</div>

　　    </div>

　　    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

　　    <script>

　　        let vm = new Vue({

　　            el: '#app',

　　            data: {

　　                tagger : true,

　　                vstyle : ['border','box'],

　　                vObj : {"border":true,"color":true,"box":true}

　　            },

　　            methods: {

　　            }

　　        })

　　    </script>

　　</body>

　　</html>

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!