条件判断:一般都用v-show和v-if
v-show和v-if都是用来做条件渲染的
使用方法:
<div v-if="isShow">v-if显示/隐藏</div>
<div v-show="isShow">v-show显示/隐藏</div>
区别
-
v-show: 控制DOM元素显示,其实控制的是css样式,也就是 display:noe
-
v-if进行判断,在浏览器中预览,你会发现整个DOM元素都不见了
-
v-show 初始会渲染dom,v-if如果是false的状态下,初始不会渲染dom
-
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
条件循环 v-for
数组的循环 (item,index) in arr item是数组的每一项 index是下标索引
<ul v-for="(item,index) in arr" :key="item.id">
<li>{
{index}}={
{item.message}}</li>
</ul>
arr:[{ message: 'Foo' }, { message: 'Bar' }]
对象循环 (value,name,index) in myObject value(对象的值)是第一个参数 name(对象的键)是第二个参数 index(索引)是第三个参数
<ul v-for="(value,name,index) in myObject" :key="value.id">
<li>{
{value}}--{
{name}}--{
{index}}</li>
</ul>
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2020-03-22'
}
数组的变更方法
push
(在数组结尾处)向数组添加一个新的元素
pop
从数组中删除最后一个元素
shift
删除首个数组元素,并把所有其他元素“位移”到更低的索引。
unshift
(在开头)向数组添加新元素,并“反向位移”旧元素:
splice 从
数组删除元素
reverse 数组的反转
sort 数组的排序
非变更方法:
filter
contact
slice