v-text:相当于innerText

v-html:相当于innerHTML
<div id="box">
{{ msg }}
<div v-text="msg"></div> <!--渲染文本-->
<div v-html="msg"></div> <!--可以渲染标签-->
</div> <script src="vue.js"></script>
<script>
new Vue({
el: '#box',
data () {
// data 中是一个函数,函数中 return 一个对象,可以是空对象,但不能不return
return {
msg: '<h2>好嗨哟</h2>'
}
}
});
</script>

Vue小白篇 - Vue 的指令系统 (1) v-text、v-html的更多相关文章

  1. Vue小白篇 - Vue介绍

    Vue ?啥是Vue?能干嘛? vue 的介绍 Vue 是一套用于构建用户界面的 渐进式框架 ,与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 前端三大框 ...

  2. Vue小白篇 -Vue 的模板语法

    可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替 <div id="box"> <!--模板语法--> <h2> ...

  3. Vue小白篇 - ES6的语法

    为什么要学 ES6 的语法呢? 因为 Vue 语法有很多都是 ES6(ECMAScript 6),这里推荐 [阮一峰 ECMAScript 6 入门]: http://es6.ruanyifeng.c ...

  4. vue基础篇---vue组件

    vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...

  5. vue基础篇---vue组件《2》

    定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...

  6. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  7. 后端小白的VUE入门笔记, 进阶篇

    使用 vue-cli( 脚手架) 搭建项目 基于vue-cli 创建一个模板项目 通过 npm root -g 可以查看vue全局安装目录,进而知道自己有没有安装vue-cli 如果没有安装的话,使用 ...

  8. Vue进阶篇

    前引 今天是2018年12月30,虽不是2018年的最后一天,但是却是自己在2018年写的最后一篇博客了,昨天下班在地铁上闲来无事,翻起了关注的一些公众号发的技术博文,里面就提到写博客的重要性,其实这 ...

  9. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

随机推荐

  1. 让docker容器使用主机系统时间(挂入/etc/localtime)

    -v挂入这个文件就可以了: -v /etc/localtime:/etc/localtime:ro

  2. ubuntu16.04的一系列安装

    1.安装ubuntu https://blog.csdn.net/weixin_40494464/article/details/81010256 2.ubuntu里选择简体中文 https://bl ...

  3. solrJ 基本使用

    添加: PropertiesUtils pro = new PropertiesUtils();String path = pro.load("solr.properties", ...

  4. 全球的IPv6部署急剧增加,但中国几乎没有一个地方部署?

    全球的IPv6部署继续增加,但中国在IPv6方面还需要努力,从部署图上分析,中国几乎没有几个地方是普及IPv6的.这6年来,自世界IPv6发布以来,全球网络和服务提供商的IPv6部署水平急剧增加.如图 ...

  5. 调试web worker (动态生成的worker)

    1.在worker.js源码文件中 写下debugger关键词 2. F12打开控制台,重新刷新页面,加载worker.js文件(注意之前的缓存,chrome推荐使用 ctrl + F5 刷新) 3. ...

  6. centos7在线安装mysql8.0.16

    一.官网复制安装源地址: 1.进入官网地址:https://dev.mysql.com/downloads/repo/yum/ 二.进入/usr/local目录下 ,创建mysql文件夹 三.使用命令 ...

  7. BZOJ 4883 棋盘上的守卫 解题报告

    BZOJ4883 棋盘上的守卫 考虑费用流,但是数据范围太大 考虑 \(i\) 行 \(j\) 列如果被选择,那么要么给 \(i\) 行,要么给 \(j\) 列 把选择 \(i\) 行 \(j\) 列 ...

  8. 圆周率Pi是如何计算出来的

    object SparkPi { def main(args: Array[String]) { val spark = SparkSession .builder .appName("Sp ...

  9. vue中img图片加载中以及加载失败显示默认图片问题

    加载中默认图片:主要是onload事件监听,data中定义变量 imgSrc :require('./default.png'): <div class="per-pic" ...

  10. LOJ 2978 「THUSCH 2017」杜老师——bitset+线性基+结论

    题目:https://loj.ac/problem/2978 题解:https://www.cnblogs.com/Paul-Guderian/p/10248782.html 第 i 个数的 bits ...