美文网首页
vue中高亮显示组件

vue中高亮显示组件

作者: Doki_455c | 来源:发表于2019-03-04 14:45 被阅读0次

    点击不同的组件,高亮显示并渲染组件
    html结构
    通过点击改变样式

    <div class="citybutton">
    <span class="select-city" :class="{'active':tabActive===0}" @click="tabActive=0">国内</span>
    <span class="select-city" :class="{'active':tabActive===1}" @click="tabActive=1">国外</span>
    </div>
    <div class="city-switch">
      <section v-show="tabActive===0">
      <foreigncity :citylist="citylist"></foreigncity>
      </section>
      <section v-show="tabActive===1">
      <domesticcity></domesticcity>
      </section>
     </div>
    

    data绑定数据

    data () {
        return {
          tabActive: 0,
        }
      }
    

    stylus样式

    .select-city
          padding: .05rem 0
          text-align: center
          width: 1.5rem
         &.active
             background: #fff
    

    默认样式


    相关文章

      网友评论

          本文标题:vue中高亮显示组件

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