vue--隐形el-scrollbar 滚动条使用步骤//动态绑
2019-01-09 本文已影响0人
undefined汪少
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//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("//unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css");
#app {
height: 300px;
overflow: hidden;
}
/*展示列表的区域，超过200px出现滚动条*/
.list {
max-height: 200px;
}
JavaScript
new Vue({
el: "#app",
data: {
num: 30
}
})
动态绑定class
style部分
先写两个class
classA{
里面写不变的样式
}
classB{
里面写动态变换的样式
}
vue.js里面
在date里面
名字myclass:"classA"值
metnhds:{
事件名(){
this.myclass="classB"
}
}
