Javascript VueJS 3-模板中的substr/截断/v-for？

我是VueJS的新手，有一个理解上的问题，我找不到任何帮助

这很简单：我通过axios的API获得JSON。此项包含要在页面上输出的说明

我的代码如下所示：

<template>
   <div v-for="item in listitems" :key="item.id">
       {{ item.description }}
   </div>
</template>


<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios'

export default defineComponent({
    name: 'AllCoupons',
    components: {
    },
    data: function() {
        return {
            listitems :[] 
        }
    },
    mounted: function() {
        axios.get('https://api.com/endpoint',
        {
            headers: {
                'Accept': 'application/json'
            }
        }).then((response) => {
            console.log(response);
            this.listitems = response.data.data
        }).catch(error => {
            console.log("ERRR:: ", error.response.data)
        });
        
    }
  
});
</script>

如果我是对的，我知道在Vue 2和过滤器中可以实现类似的功能。。。但是在Vue 3中我怎么能做这样的事情呢

非常感谢

如中所建议，您可以使用计算属性，如：

 data: function() {
        return {
            listitems :[] 
        }
    },
computed:{
   customItems(){
     return this.listitems.map(item=>{
        return {...item, description:item.description.substring(1, 4)}
    }
   }
}

然后渲染该计算属性：

  <div v-for="item in  customItems" :key="item.id">
       {{ item.description }}
   </div>

{{item.description}}

如中所建议，您可以使用计算属性，如：

 data: function() {
        return {
            listitems :[] 
        }
    },
computed:{
   customItems(){
     return this.listitems.map(item=>{
        return {...item, description:item.description.substring(1, 4)}
    }
   }
}

然后渲染该计算属性：

  <div v-for="item in  customItems" :key="item.id">
       {{ item.description }}
   </div>

{{item.description}}

如果需要，也可以使用css:

文本溢出：省略号；溢出：隐藏；空白：nowrap。当您使用省略号时，您需要提供最大宽度。如果您想要：
文本溢出：省略号；溢出：隐藏；空白：nowrap。使用EllipsShow关于使用样式、文本椭圆？@Boussadjra Brahim，谢谢，到目前为止，这似乎是最好的方法。当我尝试运行您的示例时，它会抛出一个TS1005:错误。customItems函数中的某些内容。你能给我解释一下“说明：项目说明”部分的意思吗？尤其是“描述”？thanks@sparks我使用排列运算符复制所有
项
字段，然后仅覆盖
描述
field@Naren在这种情况下，它可能很有用，但在其他情况下，例如格式化电话号码，如果使用vue 2，则应使用computed属性或过滤器。使用样式、文本椭圆如何？@Boussadjra Brahim，谢谢，到目前为止，这似乎是最好的方式。当我尝试运行您的示例时，它会抛出一个TS1005:错误。customItems函数中的某些内容。你能给我解释一下“说明：项目说明”部分的意思吗？尤其是“描述”？thanks@sparks我使用排列运算符复制所有
项
字段，然后仅覆盖
描述
field@Naren在这种情况下，它可能很有用，但在其他情况下（例如格式化电话号码），如果使用vue 2，则应使用computed属性或筛选器