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

posted @ 2017-12-24 22:00 zhen-Android 阅读(406) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

zhen

VUE指令-样式绑定v-bind

样式绑定v-bind

公告