Vue.js基礎(chǔ)學習之class與樣式綁定
更新時間：2017年03月20日 14:52:20 作者：笑嘆詞窮
這篇文章主要為大家介紹了Vue.js的Class與樣式綁定,具有一定的參考價值，感興趣的小伙伴們可以參考一下
打著鞏固 css 知識的旗號開始了對 vue 樣式綁定的研究，相比前一篇的 demo，本次內(nèi)容多了各種樣式在里面，變得稍微花哨了些，話不多說，直接上代碼吧：
<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:style="{ color: activeColor, fontSize: fontSize + 'px' }">綁定內(nèi)聯(lián)樣式</p>
<p v-bind:style="styleObject">對象樣式綁定</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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue如何在data中引入圖片的正確路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vux-uploader 圖片上傳組件的安裝及使用方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue.js之mixins混合組件詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue中實現(xiàn)可編輯table及其中加入下拉選項，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
下面小編就為大家分享一篇解決vue頁面DOM操作不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue項目安裝less和less-loader的詳細步驟，本文分步驟結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
解決vue做詳情頁跳轉(zhuǎn)的時候使用created方法 數(shù)據(jù)不會更新問題
這篇文章主要介紹了解決vue做詳情頁跳轉(zhuǎn)的時候使用created方法 數(shù)據(jù)不會更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue.js基于ElementUI封裝了CRUD的彈框組件，問咋會給你圍繞主題展開詳細的內(nèi)容介紹，感興趣的小伙伴可以參考一下2022-07-07
$once是一個函數(shù),可以為Vue組件實例綁定一個自定義事件,但該事件只能被觸發(fā)一次,觸發(fā)之后隨即被移除,下面這篇文章主要給大家介紹了關(guān)于Vue中$once的兩個實用小技巧,需要的朋友可以參考下2022-04-04
Vue CLI3創(chuàng)建項目部署到Tomcat 使用ngrok映射到外網(wǎng)
這篇文章主要介紹了Vue CLI3創(chuàng)建項目部署到Tomcat 使用ngrok映射到外網(wǎng),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05