Vue指令概述，v-if与v-show的区别

指令通过改变表达式的值从而响应式的改变DOM

1.指令

<p v-if="flag">ZMR</p>

这里根据判断v-if的指令根据表达式flag的真假来插入或者移除<p>标签

2.指令修饰符.

指令的修饰符通常使用"."来表示特殊后缀，表示指令应该以特殊的方式绑定，例如.prevent修饰符会阻止当前事件的默认行为，相当于调用了事件的event.preventDefault()方法。

<form v-on:submit.prevent="check">....</form>
new Vue ({el:"#app",methods:{check:function(){console.log("验证信息");}}
})

在表单的提交事件中添加了修饰符.prevent阻止表单的默认的提交行为，执行用户自己定义的check验证方法。

.stop修饰符将阻止事件向上冒泡，相当于调用了事件的event.stopPorpagation()方法。

3.Vue指令详解

3.1 v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果值为false，那么对应DOM便会被移除，否则值就会被插入其中。

<div id="app"><p v-if="notice">公告</p>
</div>

new Vue ({el:"#app",data:{notice:true}
})

v-if是一个指令，需要添加到元素上才有效，想要切换多个元素，可以把<template>元素当做包装元素，使用v-if来进行切换。

<div id="app"><template v-if="notice"><p>公告</p><p>限时全部免费,欲购从速</p></template>
</div>

new Vue ({el:"#app",data:{notice:true}
})

v-else指令一般与v-if搭配使用

<div id="app"><span v-if="true">判断正确时显示我</span><span v-else>判断错误时显示我</span>
</div>

v-else-if用于多重判断

<div id="app"><div v-if="type=='a'">a</div><div v-else-if="type=='b'">b</div><div v-else="type=='c'">c</div>
</div>

new Vue ({el:"#app",data:{type:'c'}
})

3.2 v-for

v-for可以根据一组数组的选项列表进行渲染，需要用到一个item in items 的特殊语法,item是源数据数组,items是数组元素迭代的别名。

<div id="app"><ol><li v-for="todo in todos">{{todo.text}}</li></ol><button onclick="app.todos.push({text:"新项目"});">点击新增</button>
</div>

<script>var app = new Vue ({el:"#app",data : {todos: [{text:'学习Vue'},{text:'学习React'},{text:'学习微信小程序'}]}})
</script>

v-for有父级作用域属性的完全访问权限，支持可选的第二参数为当前的索引值。

<li v-for="(todo,index) in todos">{{name}}在第{{index}}为{{todo.text}}
</li>

也可以用of来代替in作为分隔符，因为它是最接近JS迭代器的语法。

<div v-for="item of array"></div>

v-for的迭代对象

1.通过一个对象的属性迭代

<ul id="app"><li v-for="value in object">{{value}}</li>
</ul>

2.提供第二个参数为键名

<div v-for="(value,key) in object">{{key}}:{{value}}</div>

3.提供第三个参数为索引

<div v-for="(value,key,index) in object">{{index}}.{{key}}:{{value}}</div>

4.整数迭代

<div><span v-for="n in 10">{{n}}</apan></div>

v-for要是想渲染多个元素的块就可以用到上一级的<template>,只是起到一个包裹作用，并不会显示到页面上。

3.3 v-on

v-on指令绑定一个事件监听器，通过它调用Vue实例中定义的方法，v-on指令用于绑定HTML中的单击事件，v-on:click缩写为@click。

<div id="app"><button v-on:click="greet">Green</button>
</div>

var app = new Vue ({el:"#app",data:{name:'Vue.js'},methods:{greet:function(){alert(this.name + '方法已被调用')} }
})

3.4 v-show

v-show的用法与前面的v-if类似，可以控制元素的显示与隐藏。v-hide与-show相反。

<div v-show="true" style="display:none">我显示</div>
<div v-show="flase" style="display:none">我隐藏</div>

v-if与v-show的区别

1.v-if是动态的向DOM树添加或者删除DOM元素；v-show是控制display样式属性的显示与隐藏。

2.v-if是真实的条件渲染，因为它会确保条件块在切换中适当地销毁与重建条件块内的事件监听和子组件。v-show只是简单地基于css的切换。

3.v-if也是惰性的，如果开始条件为假，则什么也不做，v-show是在任何条件下都被编译，然后被缓存，而且DOM元素保留。

4.相比之下v-show要简单的多，元素始终被编辑并保留，只是简单的基于css切换。

5.一般来说，v-if有更高的切换消耗，v-show有更高的初始渲染消耗，因此，如要要频繁的切换，最好还是使用v-show比较好。

Vue指令概述，v-if与v-show的区别相关推荐

【Vue指令】—v-if、v-show二者用法及区别
[Vue]-条件渲染v-if指令和v-show指令条件渲染一.v-if指令使用指令v-if,当指令的值是true时就渲染,是false就不渲染二.v-show指令使用v-show指令,当指令 ...
Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on
Vue的基本代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
vue停止指令_一个微小的Vue指令，当到达边缘时停止传播滚动
vue停止指令停止滚动 (vue-scroll-stop) A tiny Vue directive that stop propagation scroll when edge reached. ...
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
计算机组成原理学习笔记第5章指令系统 5.5——MIPS指令概述
有诗云:苔花如米小,也学牡丹开.--袁枚本篇笔记整理:Code_流苏(CSDN) Last(在此处点击使用,直达文末) First (在文末点击使用,返回文章首部) 目录 0.思维导图 1.MIPS ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
vscode 终端进入node_安装了Node.js 从VScode 使用node -v 和 npm -v等命令却无效
前言最近写TypeScript需要安装.配置Node.js环境,楼主是使用的安装包所以环境变量都是自动就配好了(如果是下载的zip压缩包解压后要自己配置到系统环境变量中).打开系统终端敲入命令 no ...
POJ2762 Going from u to v or from v to u? 强连通+缩点
题目链接: poj2762 题意: 给出一幅单向图.问这张图是否满足随意两点ab 都能从a到达b 或从b到达a 题解思路: 推断一幅图是否满足弱连通首先想到的是将图中的强连通分量(能互 ...

Vue指令概述，v-if与v-show的区别

Vue指令概述，v-if与v-show的区别相关推荐

最新文章

热门文章