vue2.0 之文本渲染-v-html、v-text
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的更多相关文章
- Vue2.0流式渲染中文乱码问题
在参照vue2.0中文官方文档学习服务端渲染之流式渲染时,因为响应头默认编码类型为GBK,而文件为UFT-8类型,所以出现了中文乱码问题. 解决办法:设置响应头编码类型即可 response.setH ...
- vue2.0 之列表渲染-v-for
v-for 数组渲染 App.vue代码 <template> <div> <ul> <li v-for="item in list"&g ...
- vue2.0 之条件渲染
条件渲染v-if.v-show <template> <div> <a v-if="isPartA">partA</a> <a ...
- vue2.0 富文本组件(基于wangeditor)
1. 本组件基于 wangeditor http://www.wangeditor.com/ 如有侵权 请告知, 2. 效果图 3. 依赖安装 package.json 中 devDependenci ...
- Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)
https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染(个人博客二)
缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...
- vue2.0的虚拟DOM渲染
1.为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架(文章链接),其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更 ...
- Vue2.0源码学习(2) - 数据和模板的渲染(下)
vm._render是怎么实现的 上述updateComponent方法调用是运行了一个函数: // src\core\instance\lifecycle.js updateComponent = ...
- 浅析vue2.0的diff算法
一.前言 如果不了解virtual dom,要理解diff的过程是比较困难的. 虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTe ...
随机推荐
- HTTP基础与Android之(安卓与服务器通信)——使用HttpClient和HttpURLConnection
查看原文:http://blog.csdn.net/sinat_29912455/article/details/51122286 1客户端连接服务器实现内部的原理 GET方式和POST方式的差别 H ...
- Python 安装 OpenCV 遇到的问题
从 python下了 opencv_python-3.3.1+contrib-cp36-cp36m-win_amd64.whl [python 3.6 os win10 64 IDE Pychar ...
- node基础 npm、module、exports、require
module 模块.包:可以认为是一个代码包,package,提供特定的功能(暴露给外界接口,让外界调用) exports 输出.导出:导出模块中的各种类型的变量,以及各种方法,导出之后,才可以被外界 ...
- PAT 1002 写出这个数
https://pintia.cn/problem-sets/994805260223102976/problems/994805324509200384 读入一个自然数n,计算其各位数字之和,用汉语 ...
- HTML的input类型为hidden导致无法reset改字段的value问题
问题关键:根据HTML规范,hidden是非ui类元素,不接受用户处理.所以form的 reset并不影响它. http://stackoverflow.com/questions/6367793/w ...
- Java 线程内 递归 Bug 一例
一个线程的run方法里使用递归方法,出了Bug. private boolean ispass(String creationId){ List<Map> maps =creationSe ...
- Jquery ajax 表单.serialize() 和serializeArray()序列化$.param()
.serialize() 方法创建以标准 URL 编码表示的文本字符串.它的操作对象是代表表单元素集合的 jQuery 对象. 表单元素有几种类型: <form> <div>& ...
- pandas创建一个日期
1.通过指定周期和频率,使用date.range()函数就可以创建日期序列. 默认情况下,范围的频率是天. 2.bdate_range()用来表示商业日期范围,不同于date_range(),它不包括 ...
- GlusterFS卷的自我修复功能
一.创建环境 1.查看状态 gluster volume status 2.vim /etc/fstab 注释开机挂载 3.重启 reboot 4.查看状态 如果状态Online项为“N”的GH01存 ...
- 开启打印服务Print Spooler
windows系统需要开启Print Spooler才能进行打印,如果不开启,可能造成很多现象和原因,比如windows打印机队列的打印机全部消失,用Lodop打印的时候提示"Printer ...