列表循环和条件判断

条件判断：一般都用v-show和v-if

v-show和v-if都是用来做条件渲染的

使用方法：

<div v-if="isShow">v-if显示/隐藏</div>
<div v-show="isShow">v-show显示/隐藏</div>

区别

1. v-show： 控制DOM元素显示，其实控制的是css样式，也就是 display:noe
2. v-if进行判断，在浏览器中预览，你会发现整个DOM元素都不见了
3. v-show 初始会渲染dom，v-if如果是false的状态下，初始不会渲染dom
4. 一般来说， 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