Vue.js中的綁定樣式實(shí)現(xiàn)

更新時(shí)間：2022年05月27日 11:55:18 作者：??奔跑吧雞翅????

這篇文章主要介紹了Vue.js中的綁定樣式實(shí)現(xiàn)，展開的內(nèi)容呦style綁定樣式和綁定class樣式，具體相關(guān)內(nèi)容需要的小伙伴可以參考下面文章介紹

綁定class樣式

1、字符串寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初識(shí)</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border:1px solid black
        }
        .happy{
            background: pink;
        }
        .sad{
            background: skyblue;
        }
        .normal{
            background: aquamarine;
        }
    </style>
</head>
<body>
<div id="root">
    <!--綁定class樣式--字符串寫法，適用于：樣式類名不確定，需動(dòng)態(tài)指定-->
   <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:"#root",
        data:{
            name:'好好學(xué)習(xí)',
            mood:'normal'
        },
        methods:{
            changeMood(){
                const arr = ['happy','sad','normal']
                //生成0-2的隨機(jī)數(shù)
                this.mood = arr[Math.floor(Math.random()*3)]
            }
        }
    })
</script>
</body>
</html>

2、數(shù)組寫法

<!DOCTYPE html>
<html lang="en">
<head>
    ......
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black
        }
        ......
        .addOne {
            background: orange;
        }
        .addTwo {
            font-size: 40px;
        }
        .addThree {
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="root">
    ......
    <!--綁定class樣式--數(shù)組寫法，適用于：要綁定的樣式個(gè)數(shù)和名字都不確定-->
    <div class="basic" :class="classArr">{{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: "#root",
        data: {
            name: '好好學(xué)習(xí)',
            mood: 'normal',
            classArr: ['addOne', 'addTwo', 'addThree']
        }
        ......
    })
</script>
</body>
</html>

3、對(duì)象寫法

<style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black
        }
        .addOne {
            background: orange;
        }

        .addTwo {
            font-size: 40px;
        }
    </style>
<!--綁定class樣式-對(duì)象寫法-適用于：綁定樣式個(gè)數(shù)確定，名字也確定，但動(dòng)態(tài)決定用不用-->
<div class="basic" :class="classObj">{{name}}</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:"#root",
        data:{
            name:"好好學(xué)習(xí)",
            classObj:{
                addOne:false,
                addTwo:true
            }
        }
    })
</script>

style 綁定樣式

<!--正常的style寫法-->
<div class="basic" style="font-size: 40px">{{name}}</div>
<!--使用vue展示樣式-->
<div class="basic" :style="{fontSize:fsize+'px'}">{{name}}</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: "#root",
        data: {
            name: "好好學(xué)習(xí)",
            fsize: 40
        }
    })
</script>

或者使用 style 對(duì)象寫法：

<div class="basic" :style="styleObj">{{name}}</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: "#root",
        data: {
            name: "好好學(xué)習(xí)",
            styleObj:{
                fontSize:"30px",
                color:"red",
                backgroundColor:"orange"
            }
        }
    })
</script>

或者 style 數(shù)組寫法：

<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: "#root",
        data: {
            name: "好好學(xué)習(xí)",
            styleObj:{
                fontSize:"30px",
                color:"red"
            },
            styleObj2:{
                backgroundColor:"orange"
            }
        }
    })
</script>

綁定樣式

1、class樣式