Vue2學習筆記:class和style

本文轉載自查看原文 2017-02-21 17:27 2349 Javascript

1.用法

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    color:'color',      //值color是定義的樣式名
                    background:'background',
                    test:{color:"#666", fontWeight:"bold"}
                },
            });
        }
    </script>
    <style type="text/css">
        .color{color: #000}
        .background{background: #ccc}
    </style>
</head>
<body> 
    <div id="box">
        <!-- v-bind可省略 -->

        <!-- class -->
        <span v-bind:class="color">方式1</span>  等價 <span :class="color">方式1</span>  

        <br>
        <span v-bind:class="[color,background]">方式2</span>
        <span v-bind:class="{color:true}">方式3</span>

        <!-- 樣式 -->
        <span v-bind:style="test">方式3</span>
    </div>
</body>
</html>

注意：分清楚

:class 這個是class標簽

:style 這個是樣式標簽

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端MVC Vue2學習總結（三）——模板語法、過濾器、計算屬性、觀察者、Class 與 Style 綁定 Vue學習計划基礎筆記(三)-class與style綁定,條件渲染和列表渲染 Vue2學習筆記:組件（Component） Vue2學習筆記:計算屬性（computed） Vue2學習筆記:鍵盤事件 Vue2學習筆記:v-for指令 Vue2學習筆記:html屬性 Vue Class 與 Style 綁定 vue的 :class 與 :style 的講解 vue Class與Style綁定