vue学习(二) 三个指令v-cloak v-text v-html
//style
<style>
[v-cloak]{
display:none
}
</style>
//html
<div id="app">
<p v-cloak>+++{{msg}}---<p>
<p v-text="msg2">+++---</p>
<div v-html="msg3"></div>//msg3的内容 标签h1会被渲染
</div> //script
<script>
var vm = new Vue({
el:'app',
data:{
msg:'hello,vue',
msg2:'hello,vue,使用v-text方式',
msg3:'<h1>哈哈哈哈哈哈哈</h1>'
}
})
</script>
说明:
使用v-cloak能够解决插值表达式的加载内容的闪烁问题,另外在style中定义的样式[v-cloak],在标签元素中使用的时候可以改不加class=" ",直接使用
v-text默认是没有内容加载的闪烁问题。
另外 使用插值表达式不会影响符号++--的加载,而使用v-text的话,++--会被msg2的内容替换掉,可以这么理解,标签元素p里初始内容是+++---,当页面元素加载到v-text的时候,就用v-text指向的msg2的内容替换掉标签中的原来的内容。
使用插值表达式,只是替换自己的这个占位符,不会把整个元素的内容清空。
v-html可以渲染指定的html元素。
vue学习(二) 三个指令v-cloak v-text v-html的更多相关文章
- Vue学习系列(三)——基本指令
前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...
- Vue学习二:v-model指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
随机推荐
- cookie和session及token
cookie,session傻傻分不清楚? 做了这么多年测试,还是分不清什么是cookie,什么是session?很正常,很多初级开发工程师可能到现在都搞不清什么是session,cookie相对来说 ...
- Redis高级特性介绍以及实例分析
Redis基础类型回顾 转自:http://www.jianshu.com/p/af7043e6c8f9 String Redis中最基本,也是最简单的数据类型.注意,VALUE既可以是简单的Stri ...
- 你知道Redis可以实现延迟队列吗?
最近,又重新学习了下Redis,深深被Redis的魅力所折服,我才知道Redis不仅能快还能慢(我想也这么优秀o(╥﹏╥)o),简直是个利器呀. 咳咳咳,大家不要误会,本文很正经的啦! 好了,接下来回 ...
- Python3笔记016 - 4.1 序列
第4章 序列的应用 python的数据类型分为:空类型.布尔类型.数字类型.字节类型.字符串类型.元组类型.列表类型.字典类型.集合类型 在python中序列是一块用于存放多个值的连续内存空间. py ...
- Python3笔记007 - 2.4 数据类型
第2章 python语言基础 python语法特点 保留字与标识符 变量 数据类型 运算符 输入和输出 2.4 数据类型 数据类型分为:空类型.布尔类型.数字类型.字节类型.字符串类型.元组类型.列表 ...
- (私人收藏)[开发必备]最全Java离线快速查找手册(可查询可学习,带实例)
(私人收藏)[开发必备]最全Java离线快速查找手册(可查询可学习,带实例) https://pan.baidu.com/s/1L54VuFwCdKVnQGVc8vD1TQnwmj java手册 Ja ...
- HDU-1051/POJ-1065 Wooden sticks 木棍子(动态规划 LIS 线型动归)
嘤嘤嘤,实习半年多的小蒟蒻的第一篇博客(题解) 英文的: There is a pile of n wooden sticks. The length and weight of each stick ...
- [NOI2003]逃学的小孩 (贪心+树的直径+暴力枚举)
Input 第一行是两个整数N(3 <= N <= 200000)和M,分别表示居住点总数和街道总数.以下M行,每行给出一条街道的信息.第i+1行包含整数Ui.Vi.Ti(1<=Ui ...
- The Shortest Statement,题解
题目链接 分析: 还是很明白的题意,直接分析问题,首先,这一题真的是给spfa用武之地,m比n大不超过20,但是这并不能使暴力不t,我们考虑一下如何改进一下,我们这样想,这个图只比它的生成树多最多21 ...
- day07 流程控制
灵魂三问: 什么是?为什么要有?怎么用? 目录 一 分支结构 1.1 什么是分支结构 1.2 为什么要有分支结构 1.3 怎么用分支结构 1.3.1 if语法 二 循环结构 2.1while循环 一 ...