之前的文章我们初识了 vue，对其原理，数据绑定和方法进行了简单的演示，本篇将对 vue 插值表达式，v-text，v-html 进行讲解。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>vue</title>

     <script src="https://cdn.jsdelivr.net/npm/vue"></script>

 </head>

 <body>

 <div id="app">

     <p>{{name}}</p>

     <p v-text="name"></p>

     <p v-html="name"></p>

     <hr>

     <p>{{info}} test</p>

     <p v-text="info">test</p>

     <p v-html="info">test</p>

     <hr>

     <p>{{info}} test</p>

     <p v-text="info + ' test'"></p>

     <p v-html="info + ' test'"></p>

 </div>

 <script>

     var app = new Vue({

         el: '#app',

         data: {

             name: 'zhangsan',

             info: '<h1>I like vue</h1>'

         }

     })

 </script>

 </body>

 </html>

运行结果如下：

我们可以看出：

　　{{ }} 插值表达式：可以输出非 HTML 标签数据，无法转义 HTML 标签；

　　v-text：可以输出非 HTML 标签数据，无法转义 HTML 标签；

　　v-html：可以输出非 HTML 标签数据，可以转义 HTML 标签；

如果我们想要在数据后面添加其他数据的话：

　　{{ }} 插值表达式直接在后面添加；

　　v-text：需要在后面拼接，同时标签内的内容将无法输出。

　　v-html：需要在后面拼接，同时标签内的内容将无法输出。

Vue 进阶之路（二）的更多相关文章

  1. Vue 进阶之路（九）

    之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang=" ...

  2. Vue 进阶之路（八）

    之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="e ...

  3. Vue 进阶之路（七）

    之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...

  4. Vue 进阶之路（六）

    上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en" ...

  5. Vue 进阶之路（五）

    之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en&quo ...

  6. Vue 进阶之路（四）

    之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...

  7. Vue 进阶之路（三）

    之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch. 现在我们有一个需求,变量 firstNa ...

  8. Vue 进阶之路（一）

    vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...

  9. Vue 进阶之路（十）

    之前的文章介绍了 vue 的组件化,本章我们来看一下 vue 中组件的原生事件. <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. 保证你能看懂的KMP字符串匹配算法

    文章转载自一位大牛: 阮一峰原网址http://www.ruanyifeng.com/blog/2013/05/Knuth%E2%80%93Morris%E2%80%93Pratt_algorithm ...

  2. Webpack的配置与使用

    一.什么是Webpack?     WebPack可以看做是模块打包机.用于分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),将 ...

  3. 【python进阶】深入理解系统进程1

    前言 之前程序执⾏都是⼀条腿⾛路,甚⾄是⽤⼀杆枪来打天下. 通过系统编程的学习,会让⼤家有“多条腿”⼀起⾛路,就好⽐有了⼀把机关枪. 此篇为深入理解进程第一篇,下面开始今天的说明~~~ 进程 多任务的 ...

  4. web.config中的configSource

    在大型项目中,可能存在第三方类库的配置如:log4.net,AOP框架Unity,WCF等,或是自定义的配置,造成web.config内容过多,不易维护,影响Config初始化. 这时我们可以使用co ...

  5. ArcGis SOE(server object extensions)之REST Template初体验

    一.安装vs和arcgis server for .net(本例是vs2010.as 10),然后打开vs新建一个项目

  6. 重温《STL源码剖析》笔记 第一章

    源码之前,了无秘密. --侯杰 经典的书,确实每看一遍都能重新收获一遍: 第一章:STL简介 STL的设计思维:对象的耦合性极低,复用性极高,符合开发封闭原则的程序库. STL的价值:1.带给我们一套 ...

  7. SSH X11 MAC

    1. X11 for Mac     2. Ubuntu下通过SSH转发X窗口需要具备的条件 原文:http://unix.stackexchange.com/questions/12755/how- ...

  8. C# 插入、删除Excel分页符

    引言 对Excel表格设置分页对我们预览.打印文档时是很方便的,特别是一些包含很多复杂数据的.不规则的表格,为保证打印时每一页的排版美观性或者数据的前后连接的完整性,此时的分页符就发挥了极大的作用.因 ...

  9. 使用SimHash进行海量文本去重[转载]

    阅读目录 1. SimHash与传统hash函数的区别 2. SimHash算法思想 3. SimHash流程实现 4. SimHash签名距离计算 5. SimHash存储和索引 6. SimHas ...

  10. Linux时间子系统之二：Alarm Timer

    一.前言 严格来讲Alarm Timer也算POSIX Timer一部分,包含两种类型CLOCK_REALTIME_ALARM和CLOCK_BOOTTIME_ALARM.分别是在CLOCK_REALT ...