之前的文章我们初识了 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. Bootstrap 4，“未捕获错误：Bootstrap工具提示需要Tether（http://github.hubspot.com/tether/）”

    如果出现了这个错误,我想你是没有引用tether文件,这在v4之前不需要单独引入的. https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/te ...

  2. Taurus.MVC 支持Asp.Net Core 的过程

    前言: 这些天,似乎.NET Core相关的新闻和文章经常在我眼前晃~~~ 昨天,微软又发布了.Core 2.1,又愰了一下,差点没亮瞎我的眼睛. 好吧,大概是上天给我的暗示,毕竟 CYQ.Data  ...

  3. 震惊！外部类可以访问内部类private变量

    在讲Singleton时我举例时用过这样一段代码: public class SingletonDemo { private static class SingletonHolder{ private ...

  4. STL-Vector源码剖析

    G++ ,cygnus\cygwin-b20\include\g++\stl_vector.h 完整列表 /* * * Copyright (c) 1994 * Hewlett-Packard Com ...

  5. Unity3D学习（五）：实现一个简单的视觉感知

    前言 在很多第一人称或者第三人称射击游戏的单人模式中,玩家的乐趣往往来源于和各式各样的AI敌人的战斗.而战斗的爆发很多时候是因为这些AI在"看见"玩家后就会立即做出反应,比如开火. ...

  6. BigDecimal.setScale 处理java小数点

    BigDecimal.setScale()方法用于格式化小数点setScale(1)表示保留一位小数,默认用四舍五入方式 setScale(1,BigDecimal.ROUND_DOWN)直接删除多余 ...

  7. sql优化总结

    在项目前期目标是确保功能能够正常运行,但是随着时间的推移,数据的增加,逻辑的复杂,导致数据查询会越来越慢,这个时候我们首先想到的应该就是尽量优化sql. sql优化常见注意点: 1.对查询进行优化,应 ...

  8. springcloud禁用动注册正在运行的服务

    @EnableDiscoveryClient(autoRegister=false)或者在配置文件里spring.cloud.service-registry.auto-registration.en ...

  9. SSM-Spring-08：Spring的静态代理初窥案例

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 静态代理 java的设计模式的代理模式,就是静态代理 写在前面的话,静态代理的优点和缺点 优点:可以在不改变一 ...

  10. struts2(二)---ModelDriven模型驱动

    这篇文章是在上一篇文章(http://blog.csdn.net/u012116457/article/details/48194905)的基础上写的,大家可以先快速阅读一下上一篇. 这篇文章用来写一 ...