欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)容多了各種樣式在里面，變得稍微花哨了些，話不多說(shuō)，直接上代碼吧：

<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)文章

最新評(píng)論