vue 的 class 與 style 使用
使用物件的語法,鍵對應的就是實際的 calss 值,值對應的是 true 或 false
使用陣列的語法,值對應的是 vue data 裡面的此值對應的值
style 就相當於是直接在這裡寫了 style
<html>
<head>
<meta charset="utf-8">
<title>Vue class與style測試</title>
<script src="https://cdn.bootcss.com/vue/1.0.14/vue.min.js"></script>
<style>
.red {
background: red;
width: 100px;
height: 100px;
}
.green {
background: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<p>物件語法</p>
<div v-bind:class="{red:true}">顯示紅色區塊</div>
<div v-bind:class="{red:false}">不顯示</div>
<div v-bind:class="{red:hide}">值是變數</div>
<p>陣列語法</p>
<div v-bind:class="[green_color]">不顯示</div>
<p>style 測試</p>
<div v-bind:style="styleObject"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
hide:false,
green_color:'green',
styleObject: {
background: 'blue',
fontSize: '13px',
height:'100px',
width:'100px',
}
}
});
</script>
</body>
</html>
相關文章
- Vue Class與Style繫結Vue
- vue Class 與 Style 繫結Vue
- 小程式與Vue對比·class與style繫結Vue
- vue class與style 繫結詳解——小白速會Vue
- vue-class和style樣式繫結Vue
- vue 基礎入門筆記 03:v-model、Class 與 Style 繫結Vue筆記
- 史上最詳細 VUE2.0 全套 demo 講解 基礎 5(class 與 style 繫結)Vue
- vue中style下scope的使用和坑Vue
- 如何在vue的style標籤中使用js?VueJS
- class 和 style 資料動態繫結
- vue style樣式失效Vue
- 使用 vue-class-setup 編寫 class 風格組合式API,支援Vue2和Vue3VueAPI
- vue中慎用style的scoped屬性Vue
- list-style與list-style-type的區別
- vue style三級運算子Vue
- Web前端——Class與ID的使用規範Web前端
- vue * !!vue-style-loader!css-loader?VueCSS
- Notes about Vue Style GuideVueGUIIDE
- html中list-style-type與list-style的區別HTML
- Vue3 style CSS 變數注入VueCSS變數
- iOS攻防:class-dump 與 Dumpdecrypted 使用iOS
- offset與style區別
- 【Vue】style和class 列表渲染 使用v-for進行迴圈 監控失效 雙向資料繫結 過濾案例 事件修飾符Vue事件
- Vue.set與vue.$set的使用Vue
- 使用Qt Style Sheet(1)QT
- vue.js繫結classVue.js
- this與class(原型)原型
- Type與Class
- Object與Class的關係Object
- Vue之ref與refs的使用Vue
- Struct與Class辨析Struct
- CSS中 offsetLeft 與style.left 的區別CSS
- vue(22)Vuex的安裝與使用Vue
- 「Vue」與「React」--使用上的區別VueReact
- vue樣式寫在data中,作用在:style上Vue
- .vue檔案中style標籤的幾個識別符號Vue符號
- javascript使用style方式設定元素的樣式JavaScript
- 正確使用 Android 的 Theme 和 StyleAndroid