0
点赞
收藏
分享

微信扫一扫

23.Vue绑定style样式

Just_Esme 2022-09-21 阅读 162
vue.jsjavascript前端htmld3编程语言


目录

​​ 1.style样式对象写法​​

​​ 2.style样式数组写法​​

​​3.总结​​


上一节我们讲了绑定class样式，我们都知道，样式的绑定除了可以使用class绑定，还可以使用style内联的样式。

 1.style样式对象写法

注意：对象写法中的参数都要用驼峰写法，而不能使用横杠，否则不会生效，比如font-size应写为fontSize。

写法1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            width:400px;
            height:100px;
            border: 1px solid black;
        }

        .happy{
            border:4px solid red;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }

        .sad{
            border:4px dashed rgb(2,197,2);
            background-color: gray;
        }

        .normal{
            background-color: skyblue;
        }

        .add1{
            background-color: yellowgreen;
        }

        .add2{
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
        }

        .add3{
            border-radius:20px;
        }

    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
       <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br>

       <div class="basic" :class="classArr" >{{name}}</div> <br>

       <div class="basic" :class="classObj" >{{name}}</div> <br>

       <div class="basic" :style="{fontSize:fsize+'px'}" >{{name}}</div>

    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:'class样式',
            mood:'normal',
            classArr:['add1','add2','add3'],
            classObj:{
                add1:false,
                add2:false
            },
            fsize:40
        },
        methods: {
            changeMood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
    })
</script>
</html>

实现效果：

23.Vue绑定style样式_前端

 写法2：

上面的写法有点不好看，我们再写一种好看的写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            width:400px;
            height:100px;
            border: 1px solid black;
        }

        .happy{
            border:4px solid red;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }

        .sad{
            border:4px dashed rgb(2,197,2);
            background-color: gray;
        }

        .normal{
            background-color: skyblue;
        }

        .add1{
            background-color: yellowgreen;
        }

        .add2{
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
        }

        .add3{
            border-radius:20px;
        }

    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
       <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br>

       <div class="basic" :class="classArr" >{{name}}</div> <br>

       <div class="basic" :class="classObj" >{{name}}</div> <br>

       <div class="basic" :style="styleObj" >{{name}}</div>

    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:'class样式',
            mood:'normal',
            classArr:['add1','add2','add3'],
            classObj:{
                add1:false,
                add2:false
            },
            fsize:40,
            styleObj:{
                fontSize:'40px'
            }
        },
        methods: {
            changeMood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
    })
</script>
</html>

实现效果：

23.Vue绑定style样式_html_02

 2.style样式数组写法

数组写法会将数组中所有的样式全部显示

 写法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            width:400px;
            height:100px;
            border: 1px solid black;
        }

        .happy{
            border:4px solid red;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }

        .sad{
            border:4px dashed rgb(2,197,2);
            background-color: gray;
        }

        .normal{
            background-color: skyblue;
        }

        .add1{
            background-color: yellowgreen;
        }

        .add2{
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
        }

        .add3{
            border-radius:20px;
        }

    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
       <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br>

       <div class="basic" :class="classArr" >{{name}}</div> <br>

       <div class="basic" :class="classObj" >{{name}}</div> <br>

       <div class="basic" :style="[styleObj,styleObj2]" >{{name}}</div>

    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:'class样式',
            mood:'normal',
            classArr:['add1','add2','add3'],
            classObj:{
                add1:false,
                add2:false
            },
            fsize:40,
            styleObj:{
                fontSize:'40px'
            },
            styleObj2:{
                backgroundColor:'orange'
            }
        },
        methods: {
            changeMood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
    })
</script>
</html>

实现效果：

23.Vue绑定style样式_vue.js_03

 写法2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            width:400px;
            height:100px;
            border: 1px solid black;
        }

        .happy{
            border:4px solid red;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }

        .sad{
            border:4px dashed rgb(2,197,2);
            background-color: gray;
        }

        .normal{
            background-color: skyblue;
        }

        .add1{
            background-color: yellowgreen;
        }

        .add2{
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
        }

        .add3{
            border-radius:20px;
        }

    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
       <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br>

       <div class="basic" :class="classArr" >{{name}}</div> <br>

       <div class="basic" :class="classObj" >{{name}}</div> <br>

       <div class="basic" :style="styleArr" >{{name}}</div>

    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:'class样式',
            mood:'normal',
            classArr:['add1','add2','add3'],
            classObj:{
                add1:false,
                add2:false
            },
            fsize:40,
            styleObj:{
                fontSize:'40px'
            },
            styleObj2:{
                backgroundColor:'orange'
            },
            styleArr:[
                {
                    fontSize:'40px'
                },
                {
                    backgroundColor:'orange'
                }
            ]
        },
        methods: {
            changeMood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
    })
</script>
</html>

实现效果：

23.Vue绑定style样式_d3_04

3.总结

绑定样式:

        1.class样式

                写法：class="xxx",xxx可以是字符串，对象，数组。

                        字符串写法适用于：类名不确定，需要动态获取

                        对象写法适用于：要绑定多个样式，个数不确定，名字也不确定

                        数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

        2.style样式

   

:style="{fontSize:xxx}",其中xxx是动态值
                        :style="{a,b}",其中a,b是样式对象

举报

相关推荐

Vue2(笔记08) - Vue核心 - 绑定Class样式、绑定Style样式

Vue绑定class样式绑定style样式JavaScript前端开发

初识Vue 3.0 —— 动态Style内联样式绑定

vuehtmljswxpython虚拟化云计算

Vue教程(五)：样式绑定——class和style

jvm

绑定class和内联样式style | 重学Vue3

2021一起来看vue3JavaScript前端开发那些事儿

Vue样式绑定

字符串动态控制数组Html/CSS前端开发

Vue：绑定样式

vue前端框架

Vue 绑定样式

vuejavascripthtml数组系统/运维

vue样式绑定

vue.jsvue

绑定class和内联样式style | 脑图

2021一起来看vue3JavaScript前端开发那些事儿

[vue] Vue绑定class样式

vue.jsVue数组字符串Linux系统/运维
0 条评论