[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 ...
随机推荐
- .net 将DLL程序集生成到指定目录中
.在程序集右键属性 .在程序集属性界面中找到生成事件 在预先生成事件命令行添加: IF NOT EXIST "$(ProjectDir)..\Bin" MD "$(Pro ...
- WP8.1学习系列(第十八章)——Windows Phone 交互和可用性
本主题讨论了布局会对应用的可用性产生怎样的影响.在应用的可用性上下文中还讨论了其他常用 UI,例如搜索和设置. 在继续使用控件和交互之前,请执行以下操作: 有关概念化应用的策略,请参阅尽你所能,设计最 ...
- Android 屏幕适配:最全面的解决方案
转自:https://www.jianshu.com/p/ec5a1a30694b 前言 Android的屏幕适配一直以来都在折磨着我们Android开发者,本文将结合: Google的官方权威适配文 ...
- 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十九:SDRAM模块② — 多字读写
实验十九:SDRAM模块② — 多字读写 表示19.1 Mode Register的内容. Mode Register A12 A11 A10 A9 A8 A7 A6 A5 A4 A3 A2 A1 A ...
- 画一条0.5px的边
1.scale方法 { height: 1px; transform: scaleY(0.5); transform-origin: 50% 100%; // 要指定origin值, 要不然会模糊 c ...
- Visual Studio 2013编译Mozilla NPAPI 示例注意事项
1.Platform Toolset设置Visual Studio 2013 - Windows XP (v120_xp). 2.Character Set设置Use Multi-Byte Chara ...
- 如何在Computer下添加System Folder
1.创建一个GUID标识该系统目录,比如:{7854FF7A-470F-4D04-9FC5-4CFC7B2A0E89}.下面的操作步骤将全部使用这个示例GUID. 2.打开注册表编辑器(Registr ...
- 其它终端设备连接gmail账户提示密码错误解决方法
换新手机配置Google Account继续使用Gmail服务,输入用户名.密码进入状态同步一段时间后再次提示输入用户名.密码并显示账号信息不正确.网上有人提到"修改用户密码"再进 ...
- 基础笔记1(进制,浮点,递归,floor,round和ceil)
1,进制默认是十进制 0开头 8进制 0x 16进制 0b 2进制 2,long 的范围是19位数字.int范围是21亿左右,short 是三万二千左右. 超过int范围的long类型 ...
- PHP将富文本内容去除各类样式图片等只保留txt文本内容(作用于SEO的description)
1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...