vue2.0 之文本渲染-v-html、v-text

1、index.html代码

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>vuedemo</title>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

2、main.js代码

import Vue from 'vue'

import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  render: h => h(App)

})

render: h => h(App)是ES6的语法，实际上它等同于

render: function(h) {
　　return h(App)
}

3、App.vue代码

<template>

  <div>

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

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

    {{ num }}<br>

    {{ status ? 'success' : 'fail' }}

  </div>

</template>

<script>

  export default {

    data () {

      return {

        hello: '<span>Hello World</span>',

        num: 1,

        status: true

      }

    }

  }

</script>

<style>

  html {

    height: 100%;

  }

</style>

页面展示

vue2.0 之文本渲染-v-html、v-text的更多相关文章

  1. Vue2.0流式渲染中文乱码问题

    在参照vue2.0中文官方文档学习服务端渲染之流式渲染时,因为响应头默认编码类型为GBK,而文件为UFT-8类型,所以出现了中文乱码问题. 解决办法:设置响应头编码类型即可 response.setH ...

  2. vue2.0 之列表渲染-v-for

    v-for 数组渲染 App.vue代码 <template> <div> <ul> <li v-for="item in list"&g ...

  3. vue2.0 之条件渲染

    条件渲染v-if.v-show <template> <div> <a v-if="isPartA">partA</a> <a ...

  4. vue2.0 富文本组件(基于wangeditor)

    1. 本组件基于 wangeditor http://www.wangeditor.com/ 如有侵权 请告知, 2. 效果图 3. 依赖安装 package.json 中 devDependenci ...

  5. Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？（转）

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

  6. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染（个人博客二）

    缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

  7. vue2.0的虚拟DOM渲染

    1.为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架(文章链接),其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更 ...

  8. Vue2.0源码学习(2) - 数据和模板的渲染（下）

    vm._render是怎么实现的 上述updateComponent方法调用是运行了一个函数: // src\core\instance\lifecycle.js updateComponent = ...

  9. 浅析vue2.0的diff算法

    一.前言 如果不了解virtual dom,要理解diff的过程是比较困难的. 虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTe ...

随机推荐

  1. Python学习笔记（三）——条件语句、循环语句

    注:需注意代码的缩进格式 注:需注意代码的缩进格式 注:需注意代码的缩进格式 Python 与其他语言最大的区别就是,Python 的代码块不使用大括号 {} 来控制类,函数以及其他逻辑判断.pyth ...

  2. BugPhobia进阶篇章：前端技术/设计文档

    0x01 :前端概述 0x0100 :前端基本描述 前端基础框架 Semantic UI 根据http://semantic-ui.com/提供的样例和文档,依据Version 2.1.4版本的特性进 ...

  3. R和python语言如何求平均值，中位数和众数

    均值是通过取数值的总和并除以数据序列中的值的数量来计算. R语言平均值公式: mean(x, trim = 0, na.rm = FALSE, ...)#x - 是输入向量.trim - 用于从排序的 ...

  4. CI框架--数据库Query_Builder中的方法

    下面是DB_Query_Builder.php中,各个方法的声明: 选择字段(select) public function select($select = '*', $escape = NULL) ...

  5. Minify or format javascript file by web or notepad++

    Notepad++ plugin manager install 'JSTOOL' http://tool.oschina.net/codeformat/js https://www.cnblogs. ...

  6. [转帖]Marvell兵败中国4G 创始人去职未来几何

    Marvell兵败中国4G 创始人去职未来几何 (2016-04-12 09:08:30) 2016年的帖子. http://blog.sina.com.cn/s/blog_1542ef86c0102 ...

  7. mongoose 入门基本操作

    简介 Mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具 那么要使用它,首先你得装上node.js和mongodb,关于mongodb的安装和操作介绍可以参考:ht ...

  8. hive外部表

    创建外部表.数据从HDFS获取  只是建立了链接,hdfs中的数据丢失,表中数据也丢失;hdfs数据增加,表中数据也增加 上传文件 创建外部表 删除文件 执行查询语句,发现少了

  9. 将ubuntu14.04 从mysql从5.5删除之后安装5.7遇到的一些问题(本篇不讨论热升级)

    五一放假实在无聊 继续玩弄新的服务器.发现有台mysql版本实在有点老,估计是akiho直接使用 apt-get install mysql-server ,然后又没有更新到最新的源,然后无脑安装了5 ...

  10. 对delphi中的数据敏感控件的一点探索

    一直对delphi数据敏感控件很好奇,感觉很神奇.只要简单设置一下,就显示和编辑数据,不用写一行代码. 如果不用数据敏感控件,编辑一个表字段数据并保存,我相信应用如下代码. Table1.edit, ...