20190219-vue学习笔记3

----20190219-vue学习笔记3—

新建新的.vue组件（说明）

在components组件文件，新建文件，MyComptsTest.vue

并在，Home.vue 里面建立关联，写法如下：
1、引入MyComptsTest.vue文件，@是指向scr文件夹页面的路径

import MyComptsTest from '@/components/MyComptsTest.vue'

2、 引入MyComptsTest.vue组件

export default {
  name: 'home',
  components: {
      //调用MyComptsTest.vue的组件
    MyComptsTest
  }
}

3、在template的div把MyComptsTest的内容显示出来

<template>
  <div class="home">
    <MyComptsTest></MyComptsTest>
  </div>
</template>

4、在MyComptsTest.vue里面，添加板块

完成后，即可在MyComptsTest.vue里面，写代码，实现想要的功能效果。

v-if 与 v-show

v-if

v-if：先看写法 v-if=“条件” ，即如果条件为真，就执行标签快中的内容，如果条件为false，那么在生成的HTML语句中，条件为false的标签不会生成。
先看简单的栗子：

<!--满足条件，就显示出来-->
<div v-if="100>25">v-if满足条件，就显示出来,反之亦然</div>
<!--不满足条件，就不显示-->
<div v-if="100<25">v-if不满足条件，就不显示</div>

页面效果：

也就是，v-if 可控制DIV是否显示。

v-if经常与 isclicked逻辑属性 搭配使用。isclicked属性值，只有true和false、真与假的值，相当于布尔型。

将上面代码改进下，在方法里面添加时间：

methods:{
            isor_button:function () {
                this.isclicked =! this.isclicked;	//属性用法
                console.log('布尔变量 isclicked='+this.isclicked);

            }
        }

<div v-if="isclicked">妖魔鬼怪，快快现身！</div>
<div v-if="!isclicked">贫僧告辞！</div>
<div class="button blue bigrounded" v-on:click="isor_button">v-if显示</div>

效果如下：

单击后：

上面例子可见，v-if 满足条件后，才会显示条件的内容。

v-show

控制显示内容，还有另外一个指令v-show
v-show：同样跟v-if一样，v-show=“true/false” 控制元素显示/隐藏。
看栗子：

<div v-show="isclicked">Show Time!</div>
<div v-show="!isclicked">Show End!</div>

效果如下：

单击后：

v-if与v-show两者区别

两个组件都是都是控制显示/隐藏，那么之间有什么区别，在页面上F12看下代码：

单击按钮后：

代码可以看出，隐藏的v-if 会直接把代码“杀掉”，彻底消失；
而v-show，是把页面该对象的display属性变成none，隐藏起来，代码是不会消失；
另一层意思，用v-if，占用内存少，但是需要重新加载代码，页面速度相对较慢；v-show，会占用一定内存，但是不需要重新加载代码，页面速度相对较快。
所以，两者在各有优缺点，选用的着重不一样，使用效果会不一样。

v-for

v-for：是把数组的选项列表进行渲染。
v-for：需要使用item in items形式的特殊语法，item是数组元素迭代的别名，items是源数据数组。

举个栗子：

data(){
            return{
               numbers: ["a","b","c","d","e"],
            }
        },

<ul><li v-for="item in numbers ">{{ item }}</li> </ul>   

效果如下：

v-for索引 index

那么改进下，在序列中加上索引：
v-for=”(item,index) in 变量”
index是物理序号，对于数组，是从0开始，所以在显示序号时候，可以{{index + 1}}，从1开始。

<li v-for="(item,index) in numbers " >{{index}}           {{item}}</li>

<li v-for="(item,index) in numbers ">{{index+1}}：          {{item}}</li>

效果如下：

带有多个字段信息的数组，v-for又是如何将数组输出，看以下栗子：

data(){
            return{
                list1 : [
                    { id: 1,position:'保安人员',snumber:'3-4人',address:'天河区',sworktimes:'倒班制' },
                    { id: 2,position:'清洁工人',snumber:'5-6人',address:'东山区',sworktimes:'倒班制' },
                    { id: 3,position:'总经理助理',snumber:'1人',address:'越秀区',sworktimes:'9：00-18：00' },
                    { id: 4,position:'会计',snumber:'5人',address:'黄埔区',sworktimes:'9：00-18：00' },
                    ]
            }
        },

ID、position、snumber、address、sworktimes 都是字段，后面跟着都对应的值，写法如下：
数组别名+字段名，如 {{item.position}}=‘保安人员’

<li v-for="(item,index) in list1 ">
                    {{index}},
                    {{item.id}},
                    {{item.position}},
                    {{item.snumber}},
                    {{item.address}},
                    {{item.sworktimes}},
                </li>

用table标签进行美化：