vue.js插槽的学习（slot）

2021-11-28
V2

本文最后更新于2023.07.05-06:13，某些文章具有时效性，若有错误或已失效，请在下方留言或联系涛哥。

​ 1,默认插槽

子组件：<slot></slot>

子组件.vue

<template>
  <div class="bili-grid">
        <div class="bili-title">
            <span>番剧</span>
            <ul>
                <li>最近更新</li>
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
                <li>周日</li>
            </ul>
            <a>查看更多></a>
            <a>新番时间表></a>
            
        </div>
        <div class="bili-video-content">
            <ul>
                <li v-for="fj in fanju" :key="fj.id">
                    <img :src="fj.src">
                    <h3>{{fj.title}}</h3>
                    <p>{{fj.subtitle}}</p>
                </li>
            </ul>
        </div>
        <div class="aside-wrap">
            <h2>排行榜</h2>
            <!-- 插槽 -->
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name:'BiliBili',
    data(){
        return {
            fanju:[
                {  
                    id:'1',
                    src: require('../assets/images/01.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'2',
                    src: require('../assets/images/02.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'3',
                    src: require('../assets/images/03.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'4',
                    src: require('../assets/images/04.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'5',
                    src: require('../assets/images/05.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'6',
                    src: require('../assets/images/06.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'7',
                    src: require('../assets/images/07.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'8',
                    src: require('../assets/images/08.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'9',
                    src: require('../assets/images/09.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'10',
                    src: require('../assets/images/10.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
   
            ]
        }
    }
}
</script>

<style>
*{margin: 0;padding: 0;}
.bili-grid{
    width: 1711px;
    height: 484px;
    margin: 0 auto;
}
.bili-title{
    width: 1424px;
    height: 34px;
    float: left;
}
.bili-video-content{
    width: 1424px;
    height: 434px;
    margin-top: 16px;
    float: left;
}
.aside-wrap{
    width: 275px;
    height: 484px;
    float: left;
    margin-top: -34px;
    margin-left: 12px;
}
.aside-wrap h2{
    font-size: 24px;
    margin-left: 6px;
    margin-top: 10px;
    color: inherit;
}

.aside-wrap ul{
    list-style: none;
    margin-top: 20px;
}
.aside-wrap ul li{
    font-size: 14px;
    line-height: 45px;
    border: 1px solid #f1f3f5;
    /* #f6f7f8 */
}
/* :nth-child odd双行 even单行 如果是数字就是数字对应行数 */
.aside-wrap ul li:nth-child(even){
    background-color: #f6f7f8;
}
.aside-wrap ul li span{
    font-size: 17px;
        /* 字体倾斜 */
    font-style: italic;
}
.aside-wrap ul li:nth-child(1) span{
    color: #ff473d;
}
.aside-wrap ul li:nth-child(2) span{
    color: #ff6a29;
}
.aside-wrap ul li:nth-child(3) span{
    color: #ff9214;
}


.bili-grid span{
    margin-right: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
    color: var(--text1);
    transition: color .2s linear;
    float: left;
}
.bili-grid span:hover{
    color:#00aeec;
    cursor: pointer;
}
.bili-title ul{
    list-style: none;
    float: left;
    background-color: #f6f7f8;
    border-radius: 18px;
}
.bili-title ul li{
    float: left;
    margin-left: 10px;
    line-height: 34px;
    padding: 0 15px;
    font-size: 14px;
    
}
.bili-title ul li:nth-child(1){
    background-color: #00aeec;
    color: #ffffff;
    border-radius: 18px;
    margin-left: 0px;
}
.bili-title a{
    width: 103px;
    height: 34px;
    line-height: 34px;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 31px;
    border-radius: 8px;
    border: 1px solid #e3e5e7;
    background-color: #ffffff;
    cursor: pointer;
    float: right;
}
.bili-video-content ul{
    list-style: none;
}
.bili-video-content ul li{
    width: 270px;
    height: 207px;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
}
.bili-video-content ul li img{
    width: 270px;
    height: 155px;
    border-radius: 7px;
}
.bili-video-content ul li h3{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    word-break: break-word!important;
    word-break: break-all;
    line-break: anywhere;
    -webkit-line-clamp: 1;
    padding-right: 24px;
    color: #18191c;
    font-size: 15px;
    line-height: 22px;
    transition: color .2s linear;
}
.bili-video-content ul li p{
    margin-top: 4px;
    font-size: 13px;
    line-height: 16px;
    color: #9499a0;
}
</style>

app.vue

<template>
  <div id="app">
    <BiliBili>
        <ul>
            <li v-for="(aw,index) in awList" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
            </li>
        </ul>  
    </BiliBili><br><br><br>
    <BiliBili>
        <ul>
            <li v-for="(aw,index) in awList1" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
                <span class="number">10分</span>
            </li>
        </ul> 
    </BiliBili><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>

  </div>
</template>

<script>
//引入组件
import BiliBili from './components/BiliBili.vue'

export default {
  name: 'App',
  components: {//注册组件
    BiliBili
  },
  data(){
    return{
      awList:[
          {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
          {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
          {title:'震惊国人的10件事，尤其是第七个。',url:'http://www.baidu.com'},
          {title:'多活10年，不看后悔。',url:'http://www.baidu.com'},
          {title:'美国沉默，完全颠覆你的想象。',url:'http://www.baidu.com'},
          {title:'果断出手，这简直太神了。',url:'http://www.baidu.com'},
          {title:'灭绝人性，真是太天才了',url:'http://www.baidu.com'},
          {title:'国人不忍了，难以置信的骗术',url:'http://www.baidu.com'},
          {title:'美国慌了，不分享还是人吗？',url:'http://www.baidu.com'}
      ],
      awList1:[
          {title:'美国沉默，完全颠覆你的想象。',url:'http://www.baidu.com'},
                {title:'果断出手，这简直太神了。',url:'http://www.baidu.com'},
                {title:'灭绝人性，真是太天才了',url:'http://www.baidu.com'},
                {title:'国人不忍了，难以置信的骗术',url:'http://www.baidu.com'},
                {title:'美国慌了，不分享还是人吗？',url:'http://www.baidu.com'},
                {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
                {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
                {title:'震惊国人的事，尤其是第七个。',url:'http://www.baidu.com'},
                {title:'多活10年，不看后悔。',url:'http://www.baidu.com'}
                
            ]
    }
  }
}
</script>

<style scoped>
    .number{
      float:right;
      color: #000;
      font-size: 13px;
    }
</style>

2，具名插槽

子组件： <slot name="aw"></slot>

fuzujian：<ul slot="aw">

子组件.vue

<template>
  <div class="bili-grid">
        <div class="bili-title">
            <span>番剧</span>
            <ul>
                <li>最近更新</li>
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
                <li>周日</li>
            </ul>
            <a>查看更多></a>
            <a>新番时间表></a>
            
        </div>
        <div class="bili-video-content">
            <ul>
                <li v-for="fj in fanju" :key="fj.id">
                    <img :src="fj.src">
                    <h3>{{fj.title}}</h3>
                    <p>{{fj.subtitle}}</p>
                </li>
            </ul>
        </div>
        <div class="aside-wrap">
            <h2>
                <slot name="awname"></slot>排行榜
            </h2>
            <!-- 具名插槽 -->
            <slot name="aw"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name:'BiliBili',
    data(){
        return {
            fanju:[
                {  
                    id:'1',
                    src: require('../assets/images/01.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'2',
                    src: require('../assets/images/02.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'3',
                    src: require('../assets/images/03.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'4',
                    src: require('../assets/images/04.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'5',
                    src: require('../assets/images/05.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'6',
                    src: require('../assets/images/06.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'7',
                    src: require('../assets/images/07.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'8',
                    src: require('../assets/images/08.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'9',
                    src: require('../assets/images/09.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'10',
                    src: require('../assets/images/10.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
   
            ]
        }
    }
}
</script>

<style>
*{margin: 0;padding: 0;}
.bili-grid{
    width: 1711px;
    height: 484px;
    margin: 0 auto;
}
.bili-title{
    width: 1424px;
    height: 34px;
    float: left;
}
.bili-video-content{
    width: 1424px;
    height: 434px;
    margin-top: 16px;
    float: left;
}
.aside-wrap{
    width: 275px;
    height: 484px;
    float: left;
    margin-top: -34px;
    margin-left: 12px;
}
.aside-wrap h2{
    font-size: 24px;
    margin-left: 6px;
    margin-top: 10px;
    color: inherit;
}

.aside-wrap ul{
    list-style: none;
    margin-top: 20px;
}
.aside-wrap ul li{
    font-size: 14px;
    line-height: 45px;
    border: 1px solid #f1f3f5;
    /* #f6f7f8 */
}
/* :nth-child odd双行 even单行 如果是数字就是数字对应行数 */
.aside-wrap ul li:nth-child(even){
    background-color: #f6f7f8;
}
.aside-wrap ul li span{
    font-size: 17px;
        /* 字体倾斜 */
    font-style: italic;
}
.aside-wrap ul li:nth-child(1) span{
    color: #ff473d;
}
.aside-wrap ul li:nth-child(2) span{
    color: #ff6a29;
}
.aside-wrap ul li:nth-child(3) span{
    color: #ff9214;
}


.bili-grid span{
    margin-right: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
    color: var(--text1);
    transition: color .2s linear;
    float: left;
}
.bili-grid span:hover{
    color:#00aeec;
    cursor: pointer;
}
.bili-title ul{
    list-style: none;
    float: left;
    background-color: #f6f7f8;
    border-radius: 18px;
}
.bili-title ul li{
    float: left;
    margin-left: 10px;
    line-height: 34px;
    padding: 0 15px;
    font-size: 14px;
    
}
.bili-title ul li:nth-child(1){
    background-color: #00aeec;
    color: #ffffff;
    border-radius: 18px;
    margin-left: 0px;
}
.bili-title a{
    width: 103px;
    height: 34px;
    line-height: 34px;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 31px;
    border-radius: 8px;
    border: 1px solid #e3e5e7;
    background-color: #ffffff;
    cursor: pointer;
    float: right;
}
.bili-video-content ul{
    list-style: none;
}
.bili-video-content ul li{
    width: 270px;
    height: 207px;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
}
.bili-video-content ul li img{
    width: 270px;
    height: 155px;
    border-radius: 7px;
}
.bili-video-content ul li h3{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    word-break: break-word!important;
    word-break: break-all;
    line-break: anywhere;
    -webkit-line-clamp: 1;
    padding-right: 24px;
    color: #18191c;
    font-size: 15px;
    line-height: 22px;
    transition: color .2s linear;
}
.bili-video-content ul li p{
    margin-top: 4px;
    font-size: 13px;
    line-height: 16px;
    color: #9499a0;
}
</style>

app.vue

<template>
  <div id="app">
    <BiliBili>
        <!-- template专门用来渲染使用的，不会在页面显示 -->
        <template slot="awname">动漫</template>

        <ul slot="aw">
            <li v-for="(aw,index) in awList" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
            </li>
        </ul>  
    </BiliBili><br><br><br>
    <BiliBili>
        <template slot="awname">游戏</template>

        <ul slot="aw">
            <li v-for="(aw,index) in awList1" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
                <span class="number">10分</span>
            </li>
        </ul> 
    </BiliBili><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>

  </div>
</template>

<script>
//引入组件
import BiliBili from './components/BiliBili.vue'

export default {
  name: 'App',
  components: {//注册组件
    BiliBili
  },
  data(){
    return{
      awList:[
          {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
          {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
          {title:'震惊国人的10件事，尤其是第七个。',url:'http://www.baidu.com'},
          {title:'多活10年，不看后悔。',url:'http://www.baidu.com'},
          {title:'美国沉默，完全颠覆你的想象。',url:'http://www.baidu.com'},
          {title:'果断出手，这简直太神了。',url:'http://www.baidu.com'},
          {title:'灭绝人性，真是太天才了',url:'http://www.baidu.com'},
          {title:'国人不忍了，难以置信的骗术',url:'http://www.baidu.com'},
          {title:'美国慌了，不分享还是人吗？',url:'http://www.baidu.com'}
      ],
      awList1:[
          {title:'美国沉默，完全颠覆你的想象。',url:'http://www.baidu.com'},
                {title:'果断出手，这简直太神了。',url:'http://www.baidu.com'},
                {title:'灭绝人性，真是太天才了',url:'http://www.baidu.com'},
                {title:'国人不忍了，难以置信的骗术',url:'http://www.baidu.com'},
                {title:'美国慌了，不分享还是人吗？',url:'http://www.baidu.com'},
                {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
                {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
                {title:'震惊国人的事，尤其是第七个。',url:'http://www.baidu.com'},
                {title:'多活10年，不看后悔。',url:'http://www.baidu.com'}
                
            ]
    }
  }
}
</script>

<style scoped>
    .number{
      float:right;
      color: #000 !important;
      font-size: 13px;
    }
</style>

3，作用域插槽

子组件： <slot name="aw" :awList="awList"></slot>

fuzujian：<ul slot="aw" slot-scope="{awList}">

子组件.vue

<template>
  <div class="bili-grid">
        <div class="bili-title">
            <span>番剧</span>
            <ul>
                <li>最近更新</li>
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
                <li>周日</li>
            </ul>
            <a>查看更多></a>
            <a>新番时间表></a>
            
        </div>
        <div class="bili-video-content">
            <ul>
                <li v-for="fj in fanju" :key="fj.id">
                    <img :src="fj.src">
                    <h3>{{fj.title}}</h3>
                    <p>{{fj.subtitle}}</p>
                </li>
            </ul>
        </div>
        <div class="aside-wrap">
            <h2>
                <slot name="awname"></slot>排行榜
            </h2>
            <!-- 作用域插槽 -->
            <slot name="aw" :awList="awList"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name:'BiliBili',
    data(){
        return {
             awList:[
                {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
                {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
                {title:'震惊国人的10件事，尤其是第七个。',url:'http://www.baidu.com'},
                {title:'多活10年，不看后悔。',url:'http://www.baidu.com'},
                {title:'美国沉默，完全颠覆你的想象。',url:'http://www.baidu.com'},
                {title:'果断出手，这简直太神了。',url:'http://www.baidu.com'},
                {title:'灭绝人性，真是太天才了',url:'http://www.baidu.com'},
                {title:'国人不忍了，难以置信的骗术',url:'http://www.baidu.com'},
                {title:'美国慌了，不分享还是人吗？',url:'http://www.baidu.com'}
            ],
            awList1:[
                {title:'美国沉默，完全颠覆你的想象。',url:'http://www.baidu.com'},
                        {title:'果断出手，这简直太神了。',url:'http://www.baidu.com'},
                        {title:'灭绝人性，真是太天才了',url:'http://www.baidu.com'},
                        {title:'国人不忍了，难以置信的骗术',url:'http://www.baidu.com'},
                        {title:'美国慌了，不分享还是人吗？',url:'http://www.baidu.com'},
                        {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
                        {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
                        {title:'震惊国人的事，尤其是第七个。',url:'http://www.baidu.com'},
                        {title:'多活10年，不看后悔。',url:'http://www.baidu.com'}
                        
                    ],
            fanju:[
                {  
                    id:'1',
                    src: require('../assets/images/01.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'2',
                    src: require('../assets/images/02.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'3',
                    src: require('../assets/images/03.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'4',
                    src: require('../assets/images/04.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'5',
                    src: require('../assets/images/05.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'6',
                    src: require('../assets/images/06.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'7',
                    src: require('../assets/images/07.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'8',
                    src: require('../assets/images/08.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'9',
                    src: require('../assets/images/09.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'10',
                    src: require('../assets/images/10.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
   
            ]
        }
    }
}
</script>

<style>
*{margin: 0;padding: 0;}
.bili-grid{
    width: 1711px;
    height: 484px;
    margin: 0 auto;
}
.bili-title{
    width: 1424px;
    height: 34px;
    float: left;
}
.bili-video-content{
    width: 1424px;
    height: 434px;
    margin-top: 16px;
    float: left;
}
.aside-wrap{
    width: 275px;
    height: 484px;
    float: left;
    margin-top: -34px;
    margin-left: 12px;
}
.aside-wrap h2{
    font-size: 24px;
    margin-left: 6px;
    margin-top: 10px;
    color: inherit;
}

.aside-wrap ul{
    list-style: none;
    margin-top: 20px;
}
.aside-wrap ul li{
    font-size: 14px;
    line-height: 45px;
    border: 1px solid #f1f3f5;
    /* #f6f7f8 */
}
/* :nth-child odd双行 even单行 如果是数字就是数字对应行数 */
.aside-wrap ul li:nth-child(even){
    background-color: #f6f7f8;
}
.aside-wrap ul li span{
    font-size: 17px;
        /* 字体倾斜 */
    font-style: italic;
}
.aside-wrap ul li:nth-child(1) span{
    color: #ff473d;
}
.aside-wrap ul li:nth-child(2) span{
    color: #ff6a29;
}
.aside-wrap ul li:nth-child(3) span{
    color: #ff9214;
}


.bili-grid span{
    margin-right: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
    color: var(--text1);
    transition: color .2s linear;
    float: left;
}
.bili-grid span:hover{
    color:#00aeec;
    cursor: pointer;
}
.bili-title ul{
    list-style: none;
    float: left;
    background-color: #f6f7f8;
    border-radius: 18px;
}
.bili-title ul li{
    float: left;
    margin-left: 10px;
    line-height: 34px;
    padding: 0 15px;
    font-size: 14px;
    
}
.bili-title ul li:nth-child(1){
    background-color: #00aeec;
    color: #ffffff;
    border-radius: 18px;
    margin-left: 0px;
}
.bili-title a{
    width: 103px;
    height: 34px;
    line-height: 34px;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 31px;
    border-radius: 8px;
    border: 1px solid #e3e5e7;
    background-color: #ffffff;
    cursor: pointer;
    float: right;
}
.bili-video-content ul{
    list-style: none;
}
.bili-video-content ul li{
    width: 270px;
    height: 207px;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
}
.bili-video-content ul li img{
    width: 270px;
    height: 155px;
    border-radius: 7px;
}
.bili-video-content ul li h3{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    word-break: break-word!important;
    word-break: break-all;
    line-break: anywhere;
    -webkit-line-clamp: 1;
    padding-right: 24px;
    color: #18191c;
    font-size: 15px;
    line-height: 22px;
    transition: color .2s linear;
}
.bili-video-content ul li p{
    margin-top: 4px;
    font-size: 13px;
    line-height: 16px;
    color: #9499a0;
}
</style>

app.vue

<template>
  <div id="app">
    <BiliBili>
        <!-- template专门用来渲染使用的，不会在页面显示 -->
        <template slot="awname">动漫</template>

        <ul slot="aw" slot-scope="{awList}">
            <li v-for="(aw,index) in awList" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
            </li>
        </ul>  
    </BiliBili><br><br><br>
    <BiliBili>
        <template slot="awname">游戏</template>

        <ul slot="aw">
            <li v-for="(aw,index) in awList1" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
                <span class="number">10分</span>
            </li>
        </ul> 
    </BiliBili><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>

  </div>
</template>

<script>
//引入组件
import BiliBili from './components/BiliBili.vue'

export default {
  name: 'App',
  components: {//注册组件
    BiliBili
  }
}
</script>

<style scoped>
    .number{
      float:right;
      color: #000 !important;
      font-size: 13px;
    }
</style>
阅读剩余
版权声明：
作者：涛哥
链接：https://ltbk.net/front/vue/v2/article/151.html
文章版权归作者所有，未经允许请勿转载。
THE END
CSShtmlJavaScriptvue.js
axios跨域和一言api调用
<<上一篇
vue 路由
下一篇>>
相关推荐
Vue.js之自定义指令
Vue三级路由不跳转解决方案以及动态路由
Vue 搭建部署迷你服务器和打包上线项目
ElementUi的使用
vue 路由守卫和实现在新窗口打开
vue 二级路由和路由传参
解决vue Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.和ERROR in Cannot find module 'node-sass'
websocket聊天室
本站稳定运行