Vue.js基礎(chǔ)學(xué)習(xí)之class與樣式綁定
更新時(shí)間：2017年03月20日 14:52:20 作者：笑嘆詞窮
這篇文章主要為大家介紹了Vue.js的Class與樣式綁定,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
打著鞏固 css 知識(shí)的旗號(hào)開始了對(duì) 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>三元表達(dá)式加樣式</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">對(duì)象樣式綁定</p>
</div>
<script>
Vue.component('todo-item', {
template: '<p>todo test.</p>'
})
// 一定要實(shí)例化才能用
var app = new Vue({
el: '#app'
})
// 用類選擇器構(gòu)造一個(gè)Vue對(duì)象并綁定額外的class屬性
var app2 = new Vue({
el: '.static',
data: {
isActive: false,
hasError: true
}
})
// 數(shù)組語(yǔ)法加 class (因?yàn)槭菑南峦夏脴邮?，所以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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3如何在SCSS中使用v-bind,通過template先創(chuàng)建一個(gè)通用的頁(yè)面結(jié)構(gòu),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹形菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要給大家介紹了關(guān)于Vue3中emits與attrs區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
vue keep-alive列表頁(yè)緩存 詳情頁(yè)返回上一頁(yè)不刷新,定位到之前位置
這篇文章主要介紹了vue keep-alive列表頁(yè)緩存 詳情頁(yè)返回上一頁(yè)不刷新,定位到之前位置，本文通過實(shí)例代碼效果圖展示給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-11-11
在現(xiàn)代Web應(yīng)用開發(fā)中,異步操作是常見的挑戰(zhàn),本文介紹了Vue3中管理多個(gè)異步操作的方法,幫助開發(fā)者提高編碼效率和應(yīng)用性能,感興趣的朋友跟隨小編一起看看吧2024-09-09
Vue實(shí)現(xiàn)購(gòu)物車詳情頁(yè)面的方法
這篇文章主要介紹了Vue實(shí)戰(zhàn)之購(gòu)物車詳情頁(yè)面的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了vue2.0多條件搜索組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)圖片驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
vue3使用vuex實(shí)現(xiàn)頁(yè)面實(shí)時(shí)更新數(shù)據(jù)實(shí)例教程(setup)
在前端開發(fā)中往往會(huì)遇到頁(yè)面需要實(shí)時(shí)刷新數(shù)據(jù)的情況,給用戶最新的數(shù)據(jù)展示,這篇文章主要給大家介紹了關(guān)于vue3使用vuex實(shí)現(xiàn)頁(yè)面實(shí)時(shí)更新數(shù)據(jù)(setup)的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要和大家一起學(xué)習(xí)vue.js條件渲染，代碼注釋詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12