HTML
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@2.3.9/lib/index.js"></script>
<div id="app">
? <h2>list:</h2>
? <el-scrollbar wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="false">
? ? <div v-for="value in num" :key="vlaue">
? ? ? {{value}}
? ? </div>
? </el-scrollbar>
</div>
CSS
@import url("http://unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css");
#app {
? height: 300px;
? overflow: hidden;
}
/*展示列表的區(qū)域，超過(guò)200px出現(xiàn)滾動(dòng)條*/
.list {
? max-height: 200px;
}
JavaScript
new Vue({
? el: "#app",
? data: {
? ? num: 30
? }
})
動(dòng)態(tài)綁定class
style部分?
先寫(xiě)兩個(gè)class
classA{
里面寫(xiě)不變的樣式
}
classB{
里面寫(xiě)動(dòng)態(tài)變換的樣式
}
vue.js里面?
在date里面
名字myclass:"classA"值
metnhds:{
事件名(){
this.myclass="classB"
}
}
