在条件 Vue JS 中使用变量

Question

有没有一种方法可以在不使用 span 或其他可能具有 v-if.

的内部标记的情况下，将字符串与条件中的变量连接起来

在下面的例子中：

data() {
    return {
        useSnippet: true,
        name: 'John',
        lastName: 'Doe'
    }
}

标记应显示如下数据：

<div>
    bunch of text
    {{useSnippet ? 'Hello {{name}}, your last name is {{lastName}}'}}
    bunch of text
</div>

这当然是返回错误。

期望的结果是：

bunch of textHello John, your last name is Doebunch of text

Answer 1

也许喜欢下面的片段：

const app = Vue.createApp({
  data() {
    return {
      useSnippet: true,
      name: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    text() {
      return this.useSnippet ? `Hello ${this.name}, your last name is ${this.lastName}` : ''
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
  bunch of text
  {{ text }}
  bunch of text
</div>

Answer 2

当您使用车工运算符时，语法如下所示

条件？ : 但你没有使用过 : 所以我猜这就是为什么它给你一个错误

所以你可以做这样的事情一堆文字 {{使用片段？ Hello ${name}, your last name is ${lastName} : ''}} 一堆文字

在条件 Vue JS 中使用变量

Use variable in condition Vue JS

javascript

vue.js

vuejs3