溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Vue如何實現樣式綁定，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
固定的類名就正常的寫，需要動態綁定的類名就v-bind去綁定它
例如：:class= "mood"
下面舉一些適用的場景：
1.綁定class樣式—字符串寫法，適用于：樣式的類名不確定，需要動態指定
2.綁定class樣式 — 數組寫法使用的場景 ：綁定的樣式的個數不確定，名字也不確定
3.綁定class樣式 — 對象寫法使用的場景：綁定的個數確定的，名字也確定，不確定的是用不用該類名
<body>
<style>
.basic {
width: 100px;
height: 100px;
border: 2px solid black;
}
.happy {
width: 100px;
height: 100px;
border: 2px solid orange;
background-color: palevioletred;
}
.sad {
width: 100px;
height: 100px;
border: 2px solid black;
background-color: silver;
}
.normal {
width: 100px;
height: 100px;
border: 2px solid greenyellow;
background-color: sandybrown;
}
.outline {
border-radius: 20%;
}
.color {
color: skyblue;
}
.size {
font-family: '微軟雅黑';
font-size: 20px;
font-weight: bold;
}
</style>
<div id="root">
<!--
需求1 ：點擊div1 隨機切換mood
綁定class樣式 --- 字符串寫法
1. 固定的class類名就正常寫，需要動態指定的class類名就 :class="xxx" 寫到這里面
2. 使用的場景 : 樣式的類名不確定，需要去動態指定
-->
<div class="div1 basic" :class="mood" @click="random">{{name}}</div>
<!--
需求2 ： 點擊div2 添加類,或者刪除類
綁定class樣式 --- 數組寫法
1. 使用的場景 ：綁定的樣式的個數不確定，名字也不確定
2. shift() ：移除數組中第一個數據， push("xxx")；在末尾添加一個新的數據
-->
<div class="div2 basic" :class="classArr" @click = "remove">{{name}}</div>
<!-- 注意點：在vue操作下 " " 里面的寫的字符串是表達式，" '' " 里面寫的字符串就是值 -->
<!-- <div class="div2 basic" :class="['outline','color','size']"></div> -->
<!--
需求3 ：在outline和color之間進行切換
綁定class樣式 --- 對象寫法
使用的場景：綁定的個數確定的，名字也確定，不確定的是用不用該類名
-->
<div class="div3 basic" :class="classObj" @click="change">{{name}}</div>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
name: "Hello,Vue!",
mood: "normal",
classArr:['outline','color','size'],
classObj:{
outline:true,
color:true
}
},
methods: {
random() {
let arr = ["happy", "sad", "normal"]
// Math.floor : 表示向下取整, Math.random()：取值是0-1，1是取不到的
this.mood = arr[Math.floor(Math.random() * 3)]
},
remove(){
this.classArr.shift()
},
change(){
vm.classObj.color = !vm.classObj.color
vm.classObj.outline = !vm.classObj.outline
}
}
})
</script>例如：:style = "styleobj"
<div id="root" :>
Hello,{{name}}!
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
name:"Vue",
styleobj:{
fontSize: 50 + "px",
color: "red",
border:1+"px"+" "+"solid"+" "+"black"
}
}
})
</script>以上是“Vue如何實現樣式綁定”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
