v-cloak与v-bind绑定class_bind:cick-CSDN博客

本文链接：https://blog.csdn.net/qq_43145310/article/details/125712863

v-cloak

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

<style>
    [v-cloak] {
        display: none;
    }
</style>

<body>
    // 在Vue解析前，div中有一个属性v-cloak
    // 在Vue解析hou后，div中没有属性v-cloak
    // 实现在Vue解析前令该块div的display为none
    <div id="app" v-cloak>
        {{ message }}
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                message: '你好呀',
            }
        })
    </script>
</body>

v-bind

1.v-bind绑定class对象语法

    <style>
        .active{
            color: red;
        }
        .line{
            font-family: 'Times New Roman', Times, serif;
        }
    </style>
    
    <div id="app">
        // <h2 v-bind:class="{类名:boolean,类名:boolean}">{{ message }}</h2> 
        <h2 v-bind:class="{active:isActive,line:isLine}">{{ message }}</h2>
        // 函数方法 
        <h2 v-bind:class="getClass()">{{ message }}</h2>   
        <button @click="change">颜色切换</button>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                message: '你好呀',
                isActive: true,
                isLine: true
            },
            methods: {
                change: function() {
                    this.isActive = !this.isActive
                    this.isLine = !this.isLine
                },
                getClass: function() {
                    return {active:this.isActive,line:this.isLine}
                }
            }
        })
    </script>

2.v-bind绑定class数组语法
这种方法用得更少

    <style>
        .aaaaa{
            color: red;
        }
        .bbbbb{
            font-family: 'Times New Roman', Times, serif;
        }
    </style>
    
    <div id="app">
        // 数组内部添加单引号是字符串，不加是变量
        <h2 :class="[active,line]">{{ message }}</h2>    
        <h2 :class="getClass()">{{ message }}</h2>   
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                message: '你好呀',
                active: 'aaaaa',
                line: 'bbbbb'
            },
            methods: {
                getClass: function() {
                    return [this.active,this.line]
                }
            }
        })
    </script>

3.v-bind动态绑定style

	<div id="app"> 
        // <h2 :style="{key(css属性名):value(属性值)}">{{ message }}</h2>
        // 下面写50px的话需要加单引号，不然会被Vue认为变量
        <h2 :style="{fontSize: finalSize}">{{ message }}</h2>
        // <h2 :style="{fontSize: fontSize + 'px',color:fontColor}">{{ message }}</h2>
        // 如果觉得太长了 
        <h2 :style="getStyles()">{{ message }}</h2>
    </div>
    
    <script>
        new Vue({
            el:"#app",
            data:{
                message: '你好呀',
                finalSize: '50px',
                fontSize: 50,
                fontColor: 'red'
            },
            methods: {
                getStyles:function() {
                    return {fontSize: this.fontSize + 'px', color: this.fontColor}
                }
            }
        })
    </script>