vue-使用过滤器给v-html限制长度

最新推荐文章于 2024-05-14 15:17:29 发布

Robert_c

最新推荐文章于 2024-05-14 15:17:29 发布

阅读量1k

点赞数 3

分类专栏： vue 文章标签： html vue.js javascript

本文链接：https://blog.csdn.net/weixin_45736502/article/details/120047534

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

今天遇到个需求，需要在展示v-html的时候限制其长度并用省略号替代。记录一下

<template>
    <div>
        <!--这里的content是获取到的数据-->
        <span v-html=""$options.filters.setContent(content)""></span>
    </div>
</template>
<script>
    export default{
        name:'demo',
        data(){
            return{
                content:''
            }
        },
        methods:{},
        filters: {
            //当渲染的文字超出一定字节后显示省略号
            setContent(value) {
              if (!value) return "";
              if (value.length > 300) {
                return value.slice(0, 300) + "...";
              }
              return value;
            }
          }
    }
</script>