• 技术文章 >web前端 >前端问答

    vue怎么在元素上增加样式

    青灯夜游青灯夜游2023-01-12 18:10:39原创71

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

    本教程操作环境:windows7系统、vue3版,DELL G3电脑。

    vue中的添加样式

    一、使用class样式:

    类名必须用引号 引起来;

    1、数组

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

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

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

    3、数组中嵌套对象

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

    4、直接适用对象

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

    二、使用内联样式;

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

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

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

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

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

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

    代码实例:

    <!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>
            <!-- 添加样式/切换样式 -->
            <!-- 对象方式   border 数据模型    tagger 真假 真显示 假隐藏-->
            <!-- <div class="box" :class="{'border':tagger}">添加style样式</div> -->
            
            <!-- 表达式 -->
            <!-- <div :class="tagger ? 'border' : ''" class="box">添加style样式</div> -->
            
            <!-- 数组 -->
            <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>

    (学习视频分享:vuejs入门教程编程基础视频

    以上就是vue怎么在元素上增加样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue
    上一篇:vue中用到es6特性有哪些 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 一文带你详解Vue中的组件化编程• 一文详解vue怎么实现v-model(附代码示例)• vue组件怎么传值• 深入聊聊vue3中的reactive()• 详解Vue3响应式的两大利器:ref与reactive• Vue作者尤雨溪发文展望2023,回顾2022!
    1/1

    PHP中文网