如何在VUE中插入换行以及呈现文本的HTML？

Question

我收到了一串像这样的字符串 comeoutside，需要在前端进行处理。

但是在 HTML 中，我需要根据条件来渲染它。

const separateFirstFourWords = (words) => {
  let newStr = `${words.substring(0, 4)} <br> ${words.substring(4,words.length)}`;
  return newStr;
};

<p>{{something === true ? 'comeoutside' : separateFirstFourWords('comeoutside')}}</p>

如您所见，我想将这两个单词分开，并在这些单词之间添加一个换行符，我该如何在VUE中实现呢？

- Khant

Answer 1

您可以使用v-html指令来实现这一点：

<p v-html="something === true ? 'comeoutside' : separateFirstFourWords('comeoutside')"></p>

这将呈现三元运算符的结果作为HTML。

但是请注意，这可能会创建跨站点脚本漏洞，请参阅v-html文档中的警告。

- Gabe

Answer 2

你可以使用 v-html 指令：

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const separateFirstFourWords = (words) => {
      let newStr = `${words.substring(0, 4)} <br> ${words.substring(4, words.length)}`;
      return newStr;
    };
    const something = ref(true)
    return { separateFirstFourWords, something }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <p v-html="something === true ? 'comeoutside' : separateFirstFourWords('comeoutside')"></p>
  <button @click="something = !something">change something</button>
</div>

- Nikola Pavicevic

Answer 3

为什么不使用v-if呢？这样你的应用程序就可以防止HTML/JS注入。

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const words = 'comeoutside'
    const something = ref(false)
    return { words, something }
  }
})
app.mount('#app')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
    <div v-if="something"><p>{{words}}</p></div>
    <div v-else>
    <p>{{words.substring(0, 4)}}
    <br/>
    {{words.substring(4, words.length)}}</p>
    </div>
</div>

- caravana_942

Answer 4

您可以使用 v-html 指令，如Gabe所建议的那样，但是请注意 XSS 攻击。

实时演示:

new Vue({
  el: '#app',
  data: {
    something: false,
    comeoutside: 'Hello VueJS !'
  },
  methods: {
    separateFirstFourWords(str, breakAt) {
      let newStr = `${str.substring(0, breakAt)} <br> ${str.substring(breakAt,str.length)}`;
      return newStr;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-html="something ? comeoutside : separateFirstFourWords(comeoutside, 5)"></p>
</div>

- Rohìt Jíndal

Answer 5

您可以使用CSS white-space: pre-line; 轻松实现此目标，而不是使用 <br> 并使用 v-html 进行呈现，您可以考虑使用 \n 以避免 XSS 攻击。

<script setup>
const separateFirstFourWords = (words) => {
  let newStr = `${words.substring(0, 4)} \n ${words.substring(4,words.length)}`;
  return newStr;
};

</script>

<template>
  <h1>{{ msg }}</h1>
  <p v-text="separateFirstFourWords('comeoutside')"></p>
</template>

<style>
  p {
    white-space: pre-line;
  }
</style>

- Darwin Marcelo