[vue]vue条件渲染v-if(template)和自定义指令directives
条件渲染: v-if/template
<div id="app">
<h1>v-show: display: none</h1>
<div v-show="false">yes</div>
<!--<div v-else>no</div>-->
<h1>v-for: 判断1</h1>
<div v-if="false">yes</div>
<div v-else>no</div>
<h1>判断2</h1>
<div v-if="msg">yes</div>
<div v-else>no</div>
<h1>判断3: 不能这样写, 正确做法是v-if和v-else之间无其他内容</h1>
<div v-if="msg">yes</div>
<div>somethings</div>
<div v-else>no</div>
<h1>判断4: 如果v-if和v-else必须要有其他内容: 建议template实现</h1>
<div v-if="true">
<div>yes</div>
<div>somethings</div>
</div>
<div v-else>no</div>
<h1>判断5</h1>
<template v-if="true">
<div>yes</div>
<div>somethings</div>
</template>
<div v-else>no</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: false,
}
})
</script>
自定义指令directives
an official order or instruction
- vue有 1,模板类 2,表单类 3,事件类的各种指令 4.还可以自定义指令
<div id="app">
<h1>自定义指令: directives</h1>
<input type="text" v-focus>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "maotai",
},
directives: {
focus: {
inserted: function (el) {
el.focus();
}
}
}
})
</script>
[vue]vue条件渲染v-if(template)和自定义指令directives的更多相关文章
- vue之条件渲染
一.v-if v-if指令用于条件的渲染一块内容,当指令的表达式返回true时,内容才会被渲染. <h1 v-if="isshow">要显示么</h1> d ...
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
- vue的条件渲染和列表渲染介绍
一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...
- 前端框架之Vue(5)-条件渲染
v-if 在字符串模板中,比如 Django Template语法中,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {%if 1%} <h1>Yes ...
- vue基础——条件渲染
一.v-if 1.1.v-if,v-else 在字符串模板中,比如Handlebars,我们得像这样写一个条件块: HTML <!-- Handlebars 模板 --> {{#if ok ...
- Vue v-if条件渲染
1.简单的v-if指令,代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- vue基础---条件渲染
(1)v-if条件渲染 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. 可以用 v-else 添加一个“else 块”: ①表达式 <di ...
- vue.js条件渲染 v-if else-if v-for
v-if: 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: {{#if ok}} <!-- Handlebars 模板 --> <h1>Yes</ ...
- Vue.js 条件渲染 v-if、v-show、v-else
v-if v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. 1 2 3 ...
随机推荐
- 使用JDBC插入数据到ORACLE,使用标识列自增列
不同于SQL Server的是,Oracle中插入数据的时候,没有自增列或者是标识列,但是,我们又不想显式的进行主键的插入,这里,必须在Oracle数据库中指定一个标识列,或者说是一个序列.具体方法如 ...
- css 去除页面双击事件
-ms-touch-action: manipulation !important;
- Win8设计——现代设计,可使你的应用脱颖而出的元素
Microsoft 设计准则 Windows 在现代设计方面遥遥领先.它采用了“真实数字”原则并从瑞士风格和交通枢纽的寻路系统中汲取灵感. 阅读详细信息 设计元素 动态磁贴 动态磁贴向你提供了一个独特 ...
- Ubuntu 14.04 LTS 火狐浏览器中,鼠标选择文字被删除的解决办法
这篇文章主要介绍了Ubuntu 火狐浏览器中,鼠标选择文字被删除的解决办法,需要的朋友可以参考下在终端中输入命令: ibus-setup将 “在应用程序窗口中启用内嵌编辑模式“ 选项取消
- Linux应急处理操作手册
基础准备--命令防篡改与命令记录 很多黑客入侵到操作系统后,会做两个常见的操作unset history和替换命令文件(或者对应的链接库文件),针对这两点要做好记录shelllog并且检查链接库类文件 ...
- Maven Assembly插件介绍
转自:http://blueram.iteye.com/blog/1684070 已经写得挺好的,就不用重写了. 你是否想要创建一个包含脚本.配置文件以及所有运行时所依赖的元素(jar)Assembl ...
- [SQL] 用SQL语句检查CPU和磁盘空间
在MS Sql Server中可以能过以下的方法查询出磁盘空间的使用情况及各数据库数据文件及日志文件的大小及使用利用率: 1.查询各个磁盘分区的剩余空间:Exec master.dbo.xp_fixe ...
- 9.12DjangoORM回顾和路由.
2018-9-12 13:44:41 周末继续整理一下博客!不知不觉记了好多! 越努力越幸运! 永远不要高估自己! 关于反射的复习 # /usr/bin/env python # -*- coding ...
- Hibernate的10个常见面试问题及答案
在Java J2EE方面进行面试时,常被问起的Hibernate面试问题,大多都是针对基于Web的企业级应用开发者的角色的.Hibernate框架在Java界的成功和高度的可接受性使得它成为了Java ...
- poj3261 Milk Patterns【后缀数组】【二分】
Farmer John has noticed that the quality of milk given by his cows varies from day to day. On furthe ...