首頁 > 開發者 > 網站開發

Vue.js Class 與 Style 綁定

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：splay   html   ror   component   this   ati   text   16px   template   

綁定 Class 

<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head>    <meta charset="UTF-8">    <title>class</title>    <style>        span{            display:inline-block;        }        .static{            border:5px solid #000;        }        .active{            width:100px;            height:100px;            color:#000;        }        .text-danger{            background: greenyellow;        }    </style></head><body>    <div id="class">        <span class="static" v-bind:class="{ active: activeClass, ‘text-danger‘: errorClass }">1</span>        <span v-bind:class="[activeClass, errorClass]">2</span>        <span v-bind:class="classObject">3</span>        <span v-bind:class="classObject1">4</span>        <span v-bind:class="[isActive ? activeClass : ‘ ‘, errorClass]">5</span>        <!--始終添加 errorClass ，但是只有在 isActive 是 true 時添加 activeClass -->        <!--可寫為：<div v-bind:class="[isActive : activeClass, errorClass]">5</div>-->        <my-component class="static"></my-component>        <!--可寫為：<my-component v-bind:class="{ static: isActive }"></my-component>-->    </div>    <script src="js/vue.js"></script>    <script>        Vue.component(‘my-component‘, {            template: ‘<span class="active text-danger">6</span>‘        });        var vm = new Vue({            el:"#class",            data: {                activeClass: ‘active‘,                errorClass: ‘text-danger‘,                classObject: {                    active: true,                    ‘text-danger‘:true                },                isActive: true,                error: null            },            computed: {                classObject1: function () {                    return {                        active: this.isActive && !this.error,                        ‘text-danger‘: !this.error                    }                }            }        })    </script></body></html>
綁定Style  
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head>    <meta charset="UTF-8">    <title>style</title></head><body><div id="style">    <span v-bind:style="{color: activeColor, fontSize: fontSize + ‘px‘ }">1</span>    <span v-bind:style="styleObject">4</span></div><script src="js/vue.js"></script><script>    var vm = new Vue({        el:"#style",        data: {            activeColor: ‘red‘,            fontSize:16,            styleObject: {                color: ‘red‘,                fontSize: ‘16px‘            }        }    })</script></body></html>

 

Vue.js Class 與 Style 綁定

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More