一、条件渲染
1、v-if语句
<div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 -->
如果seen为true,则显示,如果seen为false,则不显示
2、v-if和v-else语句
<div v-if="seen">123</div> <div v-else>456</div> <!-- v-if,v-else语句 -->
如果seen为true,则显示123,如果seen不为真,则显示456
3、v-if、v-else-if、v-else语句
<div v-if="gread>90">success</div> <div v-else-if="gread>60">ok</div> <div v-else>failed</div> <!-- v-if,v-else-if,v-else语句 -->
如果gread大于90,则显示success,如果gread大于60,则显示ok,如果gread小于60,则显示failed
4、条件渲染配合template语句,template语句不会渲染到html中,只会包装多个html元素
<template v-if="seen"> <div>ni</div> <div>hao</div> <div>cuihaoran</div> </template> <template v-else> <div>ni</div> <div>hao</div> <div>zhouyongbo</div> </template> <!-- template语法结合v-if语句,同时可以控制多条html语句,template不会被渲染我html元素,仅仅用来包装多个元 -->
5、vue进行html元素切换,如果元素一样的,则不会重新创建和删除元素,比如我们下面的例子,我们在username的input标签中输入一个字符串,切换为passwd的input框,上一步输入的字符串还是会显示
<template v-if="logintype === 'username'"> <label>username:</label> <input type="text" placeholder="用户名"> </template> <template v-else> <label>passwd:</label> <input type="text" placeholder="密码"> </template> <button v-on:click = "clickFunc">切换</button> <!-- 因为插入和删除元素是非常耗时的,所以如果有上面的例子,我们2个template标签中的input标签完全一样,所有当我们在username中输入一个用户名,然后点击切换后,passwd的输入框还是会有我们之前输入的信息,vue是复用之前的元素,不会 --> <!-- 做新的增加和删除的操作 -->
我们看下clickFunc函数
我们在usernme这里输入一个1111
点击按钮切换为passwd,111还会保留
6、如果我们不想vue帮我们复用元素,我们需要为标签设置一个key
<template v-if="logintype === 'username'"> <label>username:</label> <input type="text" placeholder="用户名" key="username"> </template> <template v-else> <label>passwd:</label> <input type="text" placeholder="密码" key="email"> </template> <button v-on:click = "clickFunc">切换</button> <!-- 如果我们不想复用,你就给重新创建和删除元素,那么vue提供了一个key的变量,我们可以用这个告诉vue,不要复用,重新给我创建和生成元素 -->
这样,用key标记2个元素是不一样的,vue就会给我们重新创建元素
7、v-show,如果为false,则会给元素加一个display=false的属性,如果为true,则会给元素加一个display=true的属性,而v-if如果为false,则dom都不会有这个元素
<div v-show="seen">v-show</div> <!-- v-show是控制元素是否显示的语句,不管v-show是否为真,这个元素都存在,如果为false,则display为true而已,元素还在dom中 --> <!-- 不支持tempalte和v-else语句 -->
8、v-if和v-for同时使用
<!-- v-if和v-show在一起使用 --> <ul> <li v-for="item in items" v-if="item.isok">{{item.text}}</li> </ul>