Vue模板语法

2019年1月17日13:43:35 发表评论 阅读(1,547)
本文最后更新于2019年1月17日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

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模板语法

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛