在Vue中将javascript嵌入到html中答案

【问题标题】：Embedding javascript into html in Vue在Vue中将javascript嵌入到html中
【发布时间】：2019-10-14 12:39:02
【问题描述】：

所以我已将 Firebase 链接到我的 Vue 项目，现在我想显示博客的一部分内容。我知道要显示整个博客内容，我可以在 html 标记中简单地编写以下内容。

{{blogs[0].content}}

我的问题是，如何只显示其中的一部分，例如内容的前 100 个字符？我试过了，

{{blogs[0].content[:100]}}

但是这会导致编译错误。

我还有第二个问题，我在 Vue 中使用 bootstrap。更具体地说，卡级联。下面显示了引导卡级联的一部分。

<b-card
        title= blogs[0].title
        img-src="https://placekitten.com/g/400/450"
        img-alt="Image"
        img-top
      >
        <b-card-text>
          {{blogs[0].content[:10]}}
        </b-card-text>
</b-card>

我希望标题是 blogs[0] 的标题，但我上面的做法只是打印出“blogs[0].title”

【问题讨论】：

添加冒号和引号：:title="blogs[0].title"，或使用v-bind:

标签： vue.js

【解决方案1】：

您可以添加一个获取部分博客内容的方法。

methods: {
       getContentPortion (content, maxSize) {
          if(maxSize >= content.length) {
             return content;
           }

       return `${content.substr(0, maxSize)}...`;
    }
  },

然后你可以更新你的模板：

<b-card
        title= blogs[0].title
        img-src="https://placekitten.com/g/400/450"
        img-alt="Image"
        img-top
      >
        <b-card-text>
          {{ getContentPortion(blogs[0].content, 10) }}
        </b-card-text>
</b-card>

【讨论】：

我喜欢这个答案，因为它保持了视图（<template> 内）和逻辑（methods:{} 内）之间的关注点分离。

【解决方案2】：

<b-card
        :title=blogs[0].title
        img-src="https://placekitten.com/g/400/450"
        img-alt="Image"
        img-top
      >
        <b-card-text>
          {{blogs[0].content[:10]}}
        </b-card-text>
</b-card>

这应该可行。使用v-bind在HTML标签中使用JS。

在文档中查看更多信息：https://vuejs.org/v2/guide/class-and-style.html

【讨论】：

【解决方案3】：

我建议创建一个filter。

Vue.filter('ellipse', function (value, size) {
  if (!value) return ''
  if (value.length < size) return value;

  return `${value.substr(0, size)}...`;
})

然后您可以轻松地在整个代码中重用：

{{ message | ellipse(50) }}
<p v-text="message | ellipse(50)"></p>

【讨论】：