Vue.js中class與樣式綁定的示例分析

這篇文章給大家分享的是有關(guān)Vue.js中class與樣式綁定的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名申請、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、鎮(zhèn)雄網(wǎng)站維護、網(wǎng)站推廣。

示例如：

<html>
<head>
 <meta charset="utf-8">
 <title>Vue test</title>
 <style type="text/css">
 body {font-family: Verdana;}
 p { font-family: Times, "Times New Roman", serif;}
 .static.active {color: green; font-size: 35px;}
 div.text-danger {color: red;font-size: 25px;}
 div.active {color: blue;font-family: Verdana;}
 </style>

 <script src="./vue.min.js"></script>
</head>
<body>

<div id="app">
 <!-- Create an instance of the todo-item component -->
 <todo-item></todo-item>
</div>

<div class="static"
 v-bind:class="{ active: isActive, 'text-danger': hasError }">
 <p>class property set.</p>
</div>

<div id="app3" 
 v-bind:class="[activeClass,errorClass]">
 <p>group class property set.</p>
</div>

<div id="app4" v-bind:class="[isActive ? 'active' : 'text-danger']">
 <p>三元表達式加樣式</p>
</div>

<div id="app5">
 <my-component v-bind:class="{ active: isActive }"></my-component> 
</div>

<div id="app6">
 <p v-bind:>綁定內(nèi)聯(lián)樣式</p>
 <p v-bind:>對象樣式綁定</p>
</div>

<script>

Vue.component('todo-item', {
 template: '<p>todo test.</p>'
})

// 一定要實例化才能用
var app = new Vue({
 el: '#app'
})

// 用類選擇器構(gòu)造一個Vue對象并綁定額外的class屬性
var app2 = new Vue({
 el: '.static',
 data: {
 isActive: false,
 hasError: true
 }
})

// 數(shù)組語法加 class (因為是從下往上拿樣式，所以text-danger的color樣式被覆蓋)
var app3 = new Vue({
 el: '#app3',
 data: {
 activeClass: 'active',
 errorClass: 'text-danger'
 }
})

var app4 = new Vue({
 el: '#app4',
 data: {
 isActive: true
 }
})

Vue.component('my-component',{
 template: '<p class="static">在已經(jīng)定義好樣式的自定義組件上加樣式</p>'
})
var app5 = new Vue({
 el: '#app5',
 data: {
 isActive: true
 }
})

// 綁定內(nèi)聯(lián)樣式
var app6 = new Vue({
 el: '#app6',
 data: {
 activeColor: '#FF00FF',
 fontSize: 30,
 styleObject: {
  color: '#585858',
  fontSize: '25px'
 }
 }
})



</script>

</body>

</html>

感謝各位的閱讀！關(guān)于“Vue.js中class與樣式綁定的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享標題：Vue.js中class與樣式綁定的示例分析
文章路徑：http://chinadenli.net/article34/jggipe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、電子商務(wù)、品牌網(wǎng)站設(shè)計、標簽優(yōu)化、定制開發(fā)、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue.js中class與樣式綁定的示例分析