第七节：Class与Style绑定

Posted 2020-08-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第七节：Class与Style绑定相关的知识，希望对你有一定的参考价值。

1、绑定class，v-bind:class 简写为：:class

　　对象方式：

<!-- 绑定一个class对象，也可以绑定data中的对象-->
<span v-bind:class="{orange:isorange,  green:isgreen}">abc</span>
<span v-bind:class="colors">def</span>

 data: {
            isorange: true,
            isgreen: false,
            colors: {
                ‘orange‘: false,
                ‘green‘: true
            }
        }

数组方式：

<span v-bind:class="[orangecolor, big]">abc</span>
<span v-bind:class="[big,colors]">def</span>

data: {
            big: "big",
            orangecolor: "orange",
            colors: {
                ‘orange‘: false,
                ‘green‘: true
            }
        }

2、绑定style , v-bind:style 简写为：：style

　　　　对象方式：

<span v-bind:style="{color:yellowcolor,fontSize:larger}">def</span>
<span v-bind:style="fontsizes">def</span>

data: {
            larger: "30px",
            yellowcolor: "yellow",
　　　　　　　fontsizes: {
　　　　　　　   ‘fontSize‘: ‘40px‘
　　　　　　　}
        }

　　数组方式：

<span v-bind:style="[fontsizes,colorstyle]">sss</span>

 data: {
           
            fontsizes: {
                ‘fontSize‘: ‘40px‘
            },
            colorstyle: {
                ‘color‘: ‘orange‘
            }

        }

3、注意在data中写style样式的时候，CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）。

　　整体的例子如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <style>
        .orange {
            color: orange
        }
        
        .green {
            color: green
        }
        
        .big {
            font-size: larger;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 绑定一个class对象，也可以绑定data中的对象-->
        <span v-bind:class="{orange:isorange,  green:isgreen}">abc</span>
        <span v-bind:class="colors">def</span>
        <span v-bind:class="[orangecolor, big]">abc</span>
        <span v-bind:class="[big,colors]">def</span>
        <!-- 绑定一个style对象，也可以绑定data中的对象-->
        <span v-bind:style="{color:yellowcolor,fontSize:larger}">def</span>
        <span v-bind:style="fontsizes">def</span>
        <!--数组语法-->
        <span v-bind:style="[fontsizes,colorstyle]">sss</span>
    </div>
</body>
<script type="text/javascript">
    var app1 = new Vue({
        el: "#app",
        data: {
            isorange: true,
            isgreen: false,
            big: "big",
            larger: "30px",
            orangecolor: "orange",
            yellowcolor: "yellow",
            colors: {
                ‘orange‘: false,
                ‘green‘: true
            },
            fontsizes: {
                ‘fontSize‘: ‘40px‘
            },
            colorstyle: {
                ‘color‘: ‘orange‘
            }

        },
        methods: {

        }
    });
</script>

</html>

以上是关于第七节：Class与Style绑定的主要内容，如果未能解决你的问题，请参考以下文章

第七节——异常

php增删改查实例第七节 - 部门管理模块（画一个datagrid表格）

第七节，初识模块字节码和注释

第七节 struts2.3.15之表单提交与表单验证

2018.11.23第七节课

第七节——compose