Vue.js 中的 {{}} 和 v-text 有什么区别?

244*_*boy 2 vue.js

在 vue.js 中,我们知道有两种方法将数据绑定到视图:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">

  <p>{{msg}}</p>
  <p v-text="msg"></p>

</div>

<script src="./lib/vue.js"></script>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      msg: 'hello world',
    }
  })
</script>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

您会看到标签 p:

<p>{{msg}}</p>
<p v-text="msg"></p>
Run Code Online (Sandbox Code Playgroud)

他们之间有什么区别吗?

air*_*aft 7

它们之间有两个区别:

  1. 如果使用 来<p>{{msg}}</p>绑定数据,还可以添加更多的内容,比如:

    你好,{{msg}}!

  2. 可以避免<p v-text="msg"></p>绑定闪烁,这意味着当您加载视图时,不会{{msg}}像第一种方式那样出现。如果你想使用<p>Hi, {{msg}}!</p>方式,可以添加[v-cloak]属性:

<style>
    [v-cloak] {
      display: none;
    }
</style>

...

<p v-cloak>{{msg}}</p>


Run Code Online (Sandbox Code Playgroud)