vue.js - 如何在数组中设置长度字符串
问题描述
我不明白我做错了什么,有人可以告诉我如何在数组中设置长度字符串我需要修剪产品描述
这是我在 Vue 组件中的代码
<div v-for="product in randomProducts">
<div>
<img :src="'/uploads/img/products/' + product.image" alt="Card image cap">
<div>
<h4>{{product.price}} UAH</h4>
</div>
<div>
<h4>{{product.name}}</h4>
<p v-html="product.description">{{product.description.substring(0,3)+".."}}</p>
</div>
<div>
<a href="#">More</a>
<a href="#"><i class="fas fa-shopping-cart"></i></a>
</div>
</div>
</div>
这是我的数组
category_id: 1
created_at: "2020-05-14T16:02:12.000000Z"
description: "<p>New</p><p>New</p> <p>New</p><p>New</p><p>New</p><p>New</p><p>New</p><p>New</p><p>New</p><p>New</p><p>New</p><p>New</p>"
id: 4
image: "hzVjuKyTKw8D.jpeg"
keywords: "New"
name: "New"
price: "200"
slug: "new5ebd6b84337dc"
updated_at: "2020-05-14T16:02:12.000000Z"
解决方案
首先 - 它不是数组,它是对象。如果你只需要修剪你的字符串,你可以使用通常的 js 字符串函数 - trim():
{{ product.description.trim() }}
否则,如果由于最大长度而需要剪切字符串,则可以使用 substr():
{{ product.description.substr(0, maxlength) }}
推荐阅读
- javascript - 完成之前的任务后先调用tasked
- c# - 列表框未在 WPF 应用程序中排序
- javascript - 如何更改此代码的背景颜色
- matlab - 如何绘制迭代方法的收敛速度?
- html - 淘汰赛css绑定没有分配任何类
- python - 如何在我的 Django Rest Framework API 中包含中间模型
- r - 从具有重复项的数据创建组,以便每个组都有一个重复项表示一次
- python - sklearn 中的 normalized_mutual_info_score 给出负值或大于 1 的值
- ios - 在我的字符串末尾附加一个字符后,会添加一个不需要的空格。我该如何删除这个?
- java - RecyclerView 列表项不响应事件