美文网首页
vue--隐形el-scrollbar 滚动条使用步骤//动态绑

vue--隐形el-scrollbar 滚动条使用步骤//动态绑

作者: undefined汪少 | 来源:发表于2019-01-09 16:48 被阅读0次

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"

}

}

相关文章

网友评论

      本文标题:vue--隐形el-scrollbar 滚动条使用步骤//动态绑

      本文链接:https://www.haomeiwen.com/subject/reugrqtx.html