Hao

Vue模板语法

JavaScript 2019-01-17 1859 0
13:43:35

Vue模板语法

vue有很多模板语法，本文来说一下其中的几个：

  • 插值表达式
  • v-text
  • v-html

代码

  1. <div id="app">
  2.     <div>{{name}}</div>
  3.     <div v-text="name"></div>
  4.     <div v-html="name"></div>
  5. </div>
  6. <script>
  7.     var vm = new Vue({
  8.         el: "#app",
  9.         data: {
  10.             name: "<h1>hello</h1>"
  11.         }
  12.     })
  13. </script>

效果

Vue模板语法

由上图，我们可以看出除了v-html语法可以解析渲染h1标签以外，插值表达式和v-text都是以转义的效果来输出的，这是它们的一个区别。

总结(以前面代码为例)

  • 插值表达式：以两个花括号开始，两个花括号结束，括号内的内容绑定为data中name的数据
  • v-text：div中index的内容绑定为data中name的数据
  • v-html：div中innerHTML的内容绑定为data中name的数据，并且会解析渲染html元素
另外

vue指令后的值，也就是v-xxxx="name"中的name此时不是字符串，而是一个js表达式，而且后面可以拼接字符串。代码如下：

  1. <div id="app">
  2.     <div>{{name + 'world'}}</div>
  3.     <div v-text="name + 'world'"></div>
  4.     <div v-html="name + 'world'"></div>
  5. </div>
  6. <script>
  7.     var vm = new Vue({
  8.         el: "#app",
  9.         data: {
  10.             name: "hello"
  11.         }
  12.     })
  13. </script>

效果：

Vue模板语法

 

本文由 Hao创作，转载请注明

最后编辑时间：2019-01-17 13:43:35

发表评论