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. RESET - 把一个运行时参数值恢复为缺省值

    SYNOPSIS RESET name RESET ALL DESCRIPTION 描述 RESET 将运行时参数恢复为缺省值. RESET 是下面语句的一个变种 SET parameter TO D ...

  2. systemd:在service文件中给Exec传入多个参数

    原问题是这样的: 答案是这样的: 此外在使用prometheus监控mongodb时需要安装prometheus-mongodb-exporter,过程中也发现这种用法: 看看service单元文件是 ...

  3. 吉首大学2019年程序设计竞赛(重现赛) B 干物妹小埋

    链接:https://ac.nowcoder.com/acm/contest/992/B来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...

  4. Tab选项卡 自动切换效果js实现

    try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. 线程池(ThreadPool)创建

    线程池创建方式jdk1.5 Java通过Executors(jdk1.5并发包)提供四种线程池,分别为: newCachedThreadPool创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活 ...

  6. 【NLP新闻-2013.06.16】Representative Reviewing

    英语原文地址:http://nlp.hivefire.com/articles/share/40221/ 注:本人翻译NLP新闻只为学习专业英语和扩展视野,如果翻译的不好,请谅解! (实在是读不大懂, ...

  7. HDU 6069 Counting Divisors —— 2017 Multi-University Training 4

    Counting Divisors Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Oth ...

  8. 10.2-linux文件与目录管理

    1.1-目录的相关操作 . rm Remove (unlink) the FILE(s). -f, --force #强制删除 ignore nonexistent files, never prom ...

  9. AT2705 Yes or No(组合数学)

    传送门 解题思路 首先将这个模型放到坐标轴上,\(x\)轴表示\(1\),\(y\)轴表示\(0\).问题就转化成了从\((0,0)\)走到\((n,m)\),每次可以猜测向\(x\)轴或向\(y\) ...

  10. [CSP-S模拟测试]:阴阳(容斥+计数+递推)

    题目传送门(内部题16) 输入格式 第一行两个整数$n$和$m$,代表网格的大小.接下来$n$行每行一个长度为$m$的字符串,每个字符若为$W$代表这个格子必须为阳,若为$B$代表必须为阴,若为$?$ ...