之前的文章我们初识了 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. Spark核心编程---创建RDD

    创建RDD: 1:使用程序中的集合创建RDD,主要用于进行测试,可以在实际部署到集群运行之前,自己使用集合构造测试数据,来测试后面的spark应用流程. 2:使用本地文件创建RDD,主要用于临时性地处 ...

  2. 让 Homebrew 走代理更新 + brew 管理 node 版本

    0.前言 环境:MacOS 背景:整理下今天所做的配置. 1. 让 Homebrew 走代理更新 brew update 就卡住了,即使开了 shadowsocks 也不行.因为 shadowsock ...

  3. memcached command

    http://lzone.de/cheat-sheet/memcached memcached Cheat Sheet Telnet Interface How To Connect Use &quo ...

  4. Beta 冲刺day2

    1.昨天的困难,今天解决的进度,以及明天要做的事情 昨天的困难:昨天主要是在确认需求方面花了一些时间,后来终于确认了企业自查风险模块的需求问题 今天解决的进度:根据昨天确认下来的需求,我们基本上完成了 ...

  5. MySQL远程链接

    当把本地数据库作为服务器的时候,如果你发现client无法链接到你的数据库服务器,那么有可能是: 1. 当前account没有远程链接权限,如何开通? GRANT ALL PRIVILEGES ON ...

  6. 分析DuxCms之AdminController

    /** * 后台模板显示 调用内置的模板引擎显示方法, * @access protected * @param string $templateFile 指定要调用的模板文件 * @return v ...

  7. Java工具类 通过ResultSet对象返回对应的实体List集合

    自从学了JDBC用多了像一下这种代码: List<xxx> list = new Array<xxx>(); if(rs.next()){ xxx x = new xxx(); ...

  8. 【方案】mvc 保证定时器回收限制

    在项目中我们或多或少的遇到一些需要定时触发或者计算的东西,这个时候我们就需要定时器来作为解决方案.非常好思路清晰,业务逻辑完好,定时器也开好了,当我们信心满满的挂到IIS服务器的时候,发现写的定时器在 ...

  9. jq slideToggle()坑

    jQuery slideToggle() 方法 jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换. 如果元素向下滑动,则 slid ...

  10. 并发库应用之十 & 多线程数据交换Exchanger应用

    申明:用大白话来说就是用于实现两个人之间的数据交换,每个人在完成一定的事务后想与对方交换数据,第一个先拿出数据的人会一直等待第二个人,直到第二个人拿着数据到来时,才能彼此交换数据. java.util ...