<p v-text="foo"> 与 vue 中的 {{ foo }} 对比？

Question

vue中的<p v-text="foo">和{{ foo }}有什么区别？

我知道 {{ foo }} 是一些 DOM 东西，但它们实现了相同的功能，所以 <p v-text="foo"> 是否也在对 DOM 做些什么？

Answer 1

他们做的事情完全一样。来自 v-text docs:

Internally, {{ Mustache }} interpolations are also compiled as a v-text directive on a textNode.

使用其中任何一个，编译器都会将模板标记转换为相同的节点。

Answer 2

根据您的 use-case 可能会产生意外结果的另一个细微差别是 Line breaks on a single-line element 规则。考虑以下代码段：

示例 1

<template>
  <ul class="some-items">
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
</template>
<script>
...
const someItems = ['Snap', 'Crackle', 'Pop']
...
</script>
<style scoped lang="scss">
.someItems {
  li {
    display:inline;

    &:after {
      content: ', ';
    }

    &:last-child:after {
      content: '.';
    }
  }
}
</style>

示例 2

<template>
  <ul class="some-items">
    <li
      v-for="item in items"
      :key="item"
    >
      {{ item }}
    </li>
  </ul>
</template>
<script>
...
const someItems = ['Snap', 'Crackle', 'Pop']
...
</script>
<style scoped lang="scss">
.someItems {
  li {
    display:inline;

    &:after {
      content: ', ';
    }

    &:last-child:after {
      content: '.';
    }
  }
}
</style>

示例 3

<template>
  <ul class="some-items">
    <li
      v-for="item in items"
      :key="item"
      v-text="item"
    />
  </ul>
</template>
<script>
...
const someItems = ['Snap', 'Crackle', 'Pop']
...
</script>
<style scoped lang="scss">
.someItems {
  li {
    display:inline;

    &:after {
      content: ', ';
    }

    &:last-child:after {
      content: '.';
    }
  }
}
</style>

很容易假设所有三个样本的显示结果都相同，但是：

样本1：违反了上面的规则，虽然看起来比较短，但是被认为是bad
- 结果：Snap, Crackle, Pop.
示例 2：被认为是好的，但标签之间有白色 space
- 结果：Snap , Crackle , Pop.
样例3：同样遵守规则，结果符合预期
- 结果：Snap, Crackle, Pop.

<p v-text="foo"> 与 vue 中的 {{ foo }} 对比？

<p v-text="foo"> vs {{ foo }} in vue?

html

javascript

dom

mustache

vue.js