VUE指令-样式绑定v-bind

Posted 2020-10-18 zhen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE指令-样式绑定v-bind相关的知识，希望对你有一定的参考价值。

样式绑定v-bind

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

v-bind:style

v1.v-bind:style="{ key:value }"</div>

<hr />

<div>

Name

</div>

Name

</div>

v-bind:class

v0.v-bind指令示例(class)</div>

<hr />

<div>

Name

</div>

Name

</div>

Name

</div>

<!DOCTYPE html>
<html style="height: 100%;">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script>
        <title>HelloDemo</title>
    </head>

    <body style="height: 100%;">
        <style>
            .style0{
                font-size: 25px;
                color: green;
            }
            .style1{
                background: gold;
            }            
        </style>
        <!-- 
            VUE指令v-bind样式绑定指令
                
            REF:
                http://www.runoob.com/vue2/vue-class-style.html
                https://cn.vuejs.org/v2/guide/class-and-style.html
        -->
        <div id="appVue">
            <!-- 格式v-bind:class="{ clazzStyle , boolean表达式 }" -->
            <div style="height: 200px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v0.v-bind条件渲染(value,key,index)</div>
                <hr />
                <div>
                    <div v-bind:class="{style0: 5 > 1}">
                        Name
                    </div>
                </div>
            </div>

            <!-- 格式v-bind:style="{ key:value }" -->
            <!-- 格式v-bind:style="[dataStyle0,dataStyle1]" -->
            <!-- 样式属性不添加‘‘，将缩写为java驼峰命名变量 ‘font-size‘ >>> fontSize -->
            <div style="height: 180px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v1.v-bind:style="{ key:value }"</div>
                <hr />
                <div>
                    <div v-bind:style="{ color:colorVar , fontSize:fontVar + ‘px‘}">
                        Name
                    </div>
                    <div v-bind:style="[dataStyle0,dataStyle1]">
                        Name
                    </div>                                
                </div>
            </div>
            
            <!-- 格式v-bind:class="{ clazzStyle , isBind }" -->
            <!-- 格式v-bind:class="clazzObject" ,obj包含需要绑定的样式 -->
            <!-- 格式v-bind:class="[clazz0,clazz1]" ,clazz定义在data的样式对象 -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v0.v-bind指令示例(class)</div>
                <hr />
                <div>
                    <div v-bind:class="{ style0 : isBind ,style1:true}">
                        Name
                    </div>
                    <div v-bind:class="clazzObj">
                        Name
                    </div>    
                    <div v-bind:class="cssClazz">
                        Name
                    </div>                    
                </div>
            </div>            
        </div>
        <script>
            new Vue({
                    el: "#appVue",
                    data: {
                        cssClazz:‘style1‘,
                        clazzObj:{
                            ‘style0‘:true
                        },
                        colorVar:‘green‘,
                        fontVar:25,
                        isBind:true,
                        dataStyle0:{
                            ‘color‘:‘red‘,
                            ‘font-size‘:‘30px‘
                        },
                        dataStyle1:{
                            fontWeight:‘bold‘
                        }
                    }
                }

            )
        </script>
    </body>
</html>

View Code

REF:

http://www.runoob.com/vue2/vue-class-style.html

https://cn.vuejs.org/v2/guide/class-and-style.html

以上是关于VUE指令-样式绑定v-bind的主要内容，如果未能解决你的问题，请参考以下文章

04.vue-charp-04 v-bind及其class与style绑定

v-bind指令动态绑定内联样式（style）

05《Vue 入门教程》Vue 动态样式绑定

vue.js实战学习——v-bind 及class与 style绑定

vue指令 v-bind 属性绑定动态渲染组件

Vue常见指令和key和diff算法