之前的文章我们初识了 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. java集合的contains(obj)方法的实现

    在实际项目中我们通常会有一个需求就是:想知道在一个列表中是否包含某一个对象 这里ArrayList表.HashSet表和HashMap表都提供了一个contains(obj)方法, 下面说一下两个列表 ...

  2. PHP session有效期session.gc_maxlifetime详解

    一个已知管用的方法是,使用session_set_save_handler,接管所有的session管理工作,一般是把session信息存储到数据库,这样可以通过SQL语句来删除所有过期的sessio ...

  3. [ Java面试题 ] 框架篇

    1.谈谈你对Struts的理解. 1. struts是一个按MVC模式设计的Web层框架,其实它就是一个Servlet,这个Servlet名为ActionServlet,或是ActionServlet ...

  4. RabbitMQ windows安装（一 ）

    RabbitMQ 简单介绍: 是可以实现应用程序的解耦和异步,也可用作消息缓冲和消息分发的消息队列(MQ): 安装: 1.安装RabbitMQ前先安装Erlang语言开发包,下载地址:http://w ...

  5. 利用Hive分析nginx日志

    这里用到的nginx日志是网站的访问日志,比如日志格式: 180.173.250.74 - - [08/Jan/2015:12:38:08 +0800] "GET /avatar/xxx.p ...

  6. [已解决]pycharm的debugger模式不显示调试结果?

    由于朋友遇到这个问题,特意上网搜索了很久,没有相关答案,后来自己尝试与能正常显示的做设置对比,才找到控制开关,在此做个记录,分享给遇到这个问题的朋友. 问题如下图: 解决办法: 左上角File--&g ...

  7. JavaScript（二、BOM 浏览器对象模型）

    一.BOM是什么 BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心 ...

  8. C# 发展史

    C# 发展史 Intro 本文主要总结介绍C# 每个版本带来的不同的语言特性. C#,读作C Sharp,是微软推出的一种基于.NET平台的.面向对象的高级编程语言.是微软公司在2000年发布的一种新 ...

  9. 5月第2周业务风控关注 | 央行：严禁未经授权认可的APP接入征信系统

    本文由  网易云发布. 易盾业务风控周报每周呈报值得关注的安全技术和事件,包括但不限于内容安全.移动安全.业务安全和网络安全,帮助企业提高警惕,规避这些似小实大.影响业务健康发展的安全风险. 1．央行 ...

  10. ABP+AdminLTE+Bootstrap Table aspnetboilerplate 学习

    http://www.cnblogs.com/anyushengcms/p/7325126.html https://github.com/aspnetboilerplate/aspnetboiler ...