vuejs学习2.3 vue语法——v-if，v-else，v-else-if，v-show，v-for
vue语法
- v-if
- v-else
- v-else-if
-
- 用户登陆切换
- v-show
- v-for
-
- 遍历数
- 遍历数组
- 遍历对象
- 数组的哪些方法是响应式的
-
- 非响应式
- 响应式
-
- push
- pop
- shift
- unshift
- splice
- sort
- reverse
v-if
v-if后面的条件为true，对应的子元素及其子元素才会被渲染
<body>
<div id="app">
<h2 v-if="true">{{message}}</h2>
<h2 v-if="false">{{message}}</h2>
<h2 v-if="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"你好",
isShow:true,
}
})
</script>
</body>
结果中只能显示两个“你好”，因为第二个后为false，元素不会进行渲染
v-else
与v-if进行联用，如果v-if后值为false，则显示v-else元素
<body>
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
<h2 v-else>显示区域为else</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"你好",
isShow:false,
}
})
</script>
</body>
v-else-if
与v-if，v-else联用，类似于Java中的else if，只有当为true时才能被渲染
<body>
<div id="app">
<h2 v-if="score>90">优秀</h2>
<h2 v-else-if="score>80">良好</h2>
<h2 v-else-if="score>60">及格</h2>
<h2 v-else>不及格</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"你好",
score:56
}
})
</script>
</body>
用户登陆切换
<body>
<div id="app">
<span v-if="loginStatus">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" >
</span>
<span v-else>
<label for="userEmail">用户邮箱</label>
<input type="text" id="userEmail" placeholder="用户邮箱">
</span>
<button @click="loginStatus=!loginStatus">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"你好",
loginStatus:true,
}
})
</script>
</body>
如果按照上面代码可以实现登陆方式切换，但是如果在用户邮箱输入123，切换类型后进入用户账号123不会消失，这是因为vue在进行DOM渲染时，处于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素，所以案例中vue发现原来的input元素不再使用，直接作为else的input来使用了。解决的方法：在input元素中添加key属性并且保证key不相同，例如：
从而解决了复用问题
v-show
v-show为false时在DOM中依然存在，只是display：none
{{message}}
v-for
对于数组或者对象进行循环遍历
遍历数
{{count}}
遍历数组
v-for=“item in name”，name表示数组名，item表示数组每个值，也可以通过index获取下标，获取两个值需要用括号来实现
v-for="(item,index) in name"
//不加下标
- {{item}}
//加下标
- {{index+1}}.{{item}}
运行结果如下：
遍历对象
v-for="(item,key,index) in info"，item表示每个对象的值，key表示每个对象的key，index表示下标，根据需要进行获取
//在遍历对象过程中如果只是选择一个值，那么获取到的时value
- {{item}}
//获取key和value
- {{key}}:{{item}}
//获取key，value，index
- {{index}},{{key}}:{{item}}
运行结果如下：
数组的哪些方法是响应式的
由于vue是响应式的，当数据改变时，视图会发发生对应的更新
非响应式
btnCLick(){
this.name[0]=“aaa”;
}
这种方法对数组进行修改不是响应式，数组数据修改，视图不会改变
响应式
push
在数组尾部添加元素
this.name.push(‘aaa’);
this.name.push(‘aaa’，‘bbb’);添加后为……，aaa，bbb
pop
删除数组最后的元素
shift
删除数组头部的元素
unshift
在数组头部添加元素
this.name.unshift(‘aaa’);
this.name.unshift(‘aaa’,‘bbb’,‘ccc’);添加后为aaa，bbb，ccc，……
splice
splice，插入元素，删除元素，替换元素
删除元素:splice(start,删除元素的个数），第二个参数如果不传表示删除之后所有元素
插入元素：splice(start,0,插入的元素逗号分隔）
替换元素：splice(start,替换元素的个数，替换的元素依次列出来逗号分隔）
sort
对数组进行排序
sort()排序,括号可以传递参数，参数为函数
reverse
对数组进行反序