vue.js（2）--v-cloak v-text v-html
v-cloak v-text v-html的使用
（1）实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-cloak.v-text.v-html</title>
<script src="../lib/vue.js"></script> <!--导入vue.js -->
<style>
[v-cloak]{
display: none;
}/*设置v-cloak类中的display为none来解决插值表达式的闪烁问题*/
</style>
</head>
<body>
<div class="app">
<h1 v-cloak>++++{{ msg }}-------</h1>
<!-- 使用插值表达式会有闪烁问题 -->
<!-- 使用插值表达式可以在前后添加内容，而v-text会覆盖标签内的内容 -->
<h4 v-text="msg"></h4>
<!-- 使用v-text没有闪烁问题 -->
<p v-html="msg2"></p>
<!-- 使用v-html可以将msg2内容当做html进行输入，同时也会覆盖标签内容 -->
</div>
<script>
var vm = new Vue({
el:'.app',
data:{
msg:'努力学习vue',
msg2:'<h2>hello world</h2>'
}
})
</script>
</body>
</html>
（2）v-cloak v-text v-html和插值表达式的区别与特点
使用插值表达式会有闪烁问题
设置v-cloak类中的display为none来解决闪烁问题
使用插值表达式可以在前后添加内容，v-text会覆盖标签内容
使用v-text没有闪烁问题
使用v-html来添加带有html标签的内容，同时也会覆盖原标签的内容
vue.js（2）--v-cloak v-text v-html的更多相关文章
- Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：更深入了解Vue.js（三）
前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...
- Vue.js（25）之 vue全局配置api介绍
本文介绍的全局api并不在Vue的构造函数内,而是在Vue构造器外面提供这些方法,让我们扩展新功能. 1. vue.extend(options) 参考:https://www.w3cplus.com ...
- 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue.js（1）--创建vue实例的基本结构
vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> &l ...
- 从零开始学 Web 之 Vue.js（六）Vue的组件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue.js（一）
之前看过一点vue.js但是知识点没做记录,现在也差不多不记得了,今天把以前看过的翻一遍,顺便提炼一下知识点 注意:下面的所有与vue相关的标签.指令都是写在id="app"的di ...
- Web - 前端 Vue.js （1）
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- vue.js（5）--事件修饰符
vue中的事件修饰符(.stop..prevent..self..capture..once) (1)实例代码 <!DOCTYPE html> <html lang="en ...
随机推荐
- maven jdbc 驱动安装
https://mvnrepository.com/ 搜索 : com.microsoft.sqlserver 点击进入: https://mvnrepository.com/artifact/co ...
- LeetCode 49. 字母异位词分组（Group Anagrams）
题目描述 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", "ta ...
- moment 时间格式化
使用方法: 引入 moment 的包 moment(要处理的时间).format(时间的格式): vue 的过滤器为例: str 代表要处理的时间 orf 代表 时间的格式
- 【C++】C++类的static 关键字理解
转载自:ZJE_ANDY static修饰类中成员,表示类的共享数据 1.static类成员 C++primer里面说过,static类成员不像普通的类数据成员,static类数据成员独立于一切类对象 ...
- git使用遇到的问题
1.我新建了一个django项目,然后又在git上新建了一个仓库,然后我在django的项目文件内,将git上的项目clone到这个文件内的时候 git clone https://gitee.com ...
- nginx查看并发数量
cat >> /etc/nginx/conf.d/status.conf << EOF server{ listen ; server_name www.test2.com; ...
- Message Unable to compile class for JSP
使用 UniEAPWorkshop_5.0运行4.6 的代码,流程新建时出现的错误 JDK 使用C:\Program Files (x86)\Java\jdk1.7.0_80 tomcat使用 apa ...
- eventfd(2) 结合 select(2) 分析
本文代码选自内核 4.17 eventfd(2) - 创建一个文件描述符用于事件通知. 使用 源码分析 参考 #include <sys/eventfd.h> int eventfd(un ...
- vue-cli本地环境API代理设置和解决跨域
前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cooki ...
- 【BW系列】SAP BW on HANA 迁移问题
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[BW系列]SAP BW on HANA 迁移问 ...