零基础入门Vue之To be or not to be——条件渲染

  • 零基础入门Vue之To be or not to be——条件渲染已关闭评论
  • 19 次浏览
  • A+
所属分类:Web前端
摘要

上一节:零基础入门Vue之皇帝的新衣——样式绑定在前面的内容能了解到,Vue不仅仅能进行数据渲染还可以对样式进行绑定


温故

上一节:零基础入门Vue之皇帝的新衣——样式绑定

在前面的内容能了解到,Vue不仅仅能进行数据渲染还可以对样式进行绑定

并且他能随意的切换样式,但Vue的初衷就是尽量少让使用者操作dom节点

加入你要让指定dom显示或者不显示,该怎么办呢?以目前的东西来说,不拿到dom节点还是做不到的

因此,Vue提供了另外的办法去解决它:条件渲染

条件渲染之v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

从官网上看,这个v-if指令理解起来也不难,就是说,想要显示就

<div v-if="true"></div> 

不想显示就

<div v-if="false"></div> 

v-if的基本用法

可以根据前面提到的原理,用一个变量去控制,毕竟双引号里面可以写js表达式

基于这个原理,实现一个点击按钮显示文字,再点击文字消失,再点击显示以此类推的效果

v-else与v-else-if

众所周知,在变成语言里面分支是依赖于if-else或者是if-else-if来控制的(switch、三目暂且不论)

Vue也提供了这一种方式,允许根据一定条件下来控制多个dom节点的显示或不显示

PS:如果要使用这种办法,dom节点必须连在一起不能拓展 且 当条件为false的时候这个dom会被删除,但为true的时候会添加进去

请看如下例子:利用Vue的条件渲染,实现判断密码是否输入错误、输入为空、输入正确,并且给出提示

具体代码如下:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <script src="./vue.js"></script>     <title>Document</title> </head> <body>     <div id="root">         <input type="password" v-model="pwd" placeholder="enter you pwd."><br/>                  <span v-if="pwd==''">密码不能为空</span>         <span v-else-if="pwd!=='123456'">密码错误</span>         <span v-else >密码正确</span>     </div> </body> <script>     let vm = new Vue({         el:"#root",         data:{             pwd:""         },     }) </script> </html> 

条件渲染之v-show

v-show与v-if不同,v-show是直接让节点不显示,但并不是删除

并且v-show没有其他的else,他就只有一个true显示false不显示

看代码:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <script src="./vue.js"></script>     <title>Document</title> </head> <body>     <div id="root">         <span v-show="show">Hello world</span><br/>         <button @click="show=!show">点我显示文字</button>     </div> </body> <script>     let vm = new Vue({         el:"#root",         data:{             show:false         },     }) </script> </html> 

我比较懒,直接搬了v-if的基本使用的代码,v-show的用法只有这一点,其他的也无非是在""里面写变量去控制显示不显示

打开浏览器的开发者调试工具可以看到当show为false时这个节点存在但他被隐藏了,但v-if是直接删除

ps:v-show比较适用于变动比较频繁的场合,变动不需要渲染很多东西

The End

结束啦~