【07】Vue基础：v-bind的使用

前端

发布日期: 2020-10-22

更新日期: 2020-10-22

文章字数: 664

阅读次数:

class 对象语法

模版写法：

<div v-bind:class="{ green: isActive01 }"></div>
多个：
<div v-bind:class="{ red: isActive02, font: isActive03 }">白色</div>

<!-- -------------------- 简写 -------------------- -->
<div :class="{ green: isActive01 }"></div>
多个：
<div :class="{ red: isActive02, font: isActive03 }">白色</div>

完整代码：

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>v-bind class</title>
        <style type="text/css">
            .blue {
                width: 100px;
                height: 100px;
                background-color: blue;
            }
            .green {
                width: 100px;
                height: 100px;
                background-color: green;
            }
            .red {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .font {
                color: white;
            }
        </style>
         <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
     </head>
     <body>
         <div id="app">
             <div v-bind:class="styl"></div>
            <div v-bind:class="{ green: isActive01 }"></div>
            <div v-bind:class="{ red: isActive02, font: isActive03 }">白色</div>
         </div>
         <script type="text/javascript">
             var vm = new Vue({
                 el: '#app',
                 data() {
                     return {
                         styl: 'blue',
                        isActive01: true,
                        isActive02: true,
                        isActive03: true
                     }
                 }
             })
         </script>
     </body>
 </html>

class 数组语法

模版写法：

<div v-bind:class="[ class01, class02 ]">白色</div>
<!-- -------------------- 简写 -------------------- -->
<div :class="[ class01, class02 ]">白色</div>

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-bind class</title>
        <style type="text/css">
            .red {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .font {
                color: white;
            }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    </head>
    <body>
        <div id="app">
            <div v-bind:class="[ class01, class02 ]">白色</div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data() {
                    return {
                        class01: 'red',
                        class02: 'font'
                    }
                }
            })
        </script>
    </body>
</html>

style 对象语法

模版写法：

<div v-bind:style="{ color: 'red', fontSize: '50px' }">文字</div>
<!-- -------------------- 简写 -------------------- -->
<div :style="{ color: 'red', fontSize: '50px' }">文字</div>

完整代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>v-bind style</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    </head>
    <body>
        <div id="app">
            <div v-bind:style="{ color: 'red', fontSize: '50px' }">文字</div>
            <div v-bind:style="styleObject">白色</div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data() {
                    return {
                        styleObject: {
                            width: '100px',
                            height: '100px',
                            backgroundColor: 'red',
                            color: 'white'
                        }
                    }
                }
            })
        </script>
    </body>
</html>

注：当样式类似于font-size这种形式时，需要改写为fontSize。

style 数组语法

模版写法：

<div v-bind:style="[style01, style02]">文字</div>
<!-- -------------------- 简写 -------------------- -->
<div :style="[style01, style02]">文字</div>

完整代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>v-bind style</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    </head>
    <body>
        <div id="app">
            <div v-bind:style="[style01, style02]">文字</div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data() {
                    return {
                        style01: {
                            width: '100px',
                            height: '100px',
                            backgroundColor: 'red'
                        },
                        style02: {
                            color: 'white'
                        }
                    }
                }
            })
        </script>
    </body>
</html>