时间戳

首页 > 解决方案 > 有没有办法修改 Vue 组件内的 HTML 标签的内容？

javascript - 有没有办法修改 Vue 组件内的 HTML 标签的内容？

问题描述

我是 Vue.js 的新手，还没有理解它。所以我想知道是否有一种方法可以让我的自定义 Vue 组件（UnorderedList）操纵我的自定义组件（UnorderedList）中的内容

如果我<p>的组件中有这样的标签：

<UnorderedList :dashed="true">
     <p>some sentence here</p>
     <p>some sentence here</p>
</UnorderedList>

那么这就是页面呈现时的样子


some sentence here
some sentence here

我希望我的组件在这里做的是在每个标签之前添加一个“ -<p> ” ，这样当页面呈现时它应该看起来像这样：

- some sentence here
- some sentence here

这是我现在的 UnorderedList.vue

<template>
  <ul >
    <span v-if="dashed">-</span>
  </ul>
</template>

<script>

export default {
  name: 'UnorderedList',
  props: {
    dashed: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

上面的代码显然不能按照我想要的方式工作。

所以，基本上我想在自定义组件（UnorderedList）内的所有内容之前添加一个“ - ”。

我怎样才能做到这一点 ？

如果这是一个愚蠢的问题，我提前道歉

标签： javascriptvue.jsvue-component

解决方案

你可以使用 vue 过滤器

            Vue.filter('dash', function (value) {
              if (!value) return ''
              value = `- ${value}`;
              return value;
            })


            var app = new Vue({
                      el: '#app',
                      data: {
                        message: 'Hello Vue!'
                      }
                    })
<div id="app">
        {{message | dash}}
</div>

创建过滤器后，您可以在上面的 html 模板中使用它（message | dash）

推荐阅读