v-show与v-if作用

一.v-show

控制元素显示, 通过display: none控制显示

语法: v-show=“变量或者表达式”

如果变量或者表达式为true, 会显示标签, 否则隐藏

二. v-if

v-if控制标签显示
语法: v-if=“变量或者表达式”
v-if通过控制标签是否删除显示 , v-if有性能优势

三. 代码示例

<template>
  <div>
    <h1 v-show="age >= 18">年满18岁才能看到以下内容</h1>
	<hr>
    <h1 v-if="age >= 18">年满18岁才能看到以下内容</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 1,
    };
  },
  methods: {},
};
</script>

<style></style>

四.v-if-else

v-if可以和v-else搭配, 用来条件控制显示
v-if和v-else一定要是相邻元素
v-if和v-else-if还有v-else可以一起搭配, 实现多个条件判断
v-show是不可以和v-else搭配使用

代码示例

<template>
  <div>
    <h1 v-if="age >= 18">来吃榴莲</h1>
    <h1 v-else>来吃甜甜圈</h1>
    <h1 v-if="age < 18">甜甜圈</h1>
    <h1 v-else-if="age < 60">枸杞泡水</h1>
    <h1 v-else-if="age < 80">脑白金</h1>
    <h1 v-else-if="age < 100">冬虫夏草</h1>
    <h1 v-else>灵丹妙药</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
    };
  },
  methods: {},
};
</script>

<style></style>

实现功能 : 封装的组件中，功能比较多，有些功能某些页面不需要，
解决：可以通过路由去设置特定的页面，设置功能需要或者不需要。
代码实现：

<div v-if='xians'>
	这里是要显示的内容
</div>
<div v-else>
	这里是不需要显示的内容
</div>

//判断路由
data(){
	return {
		xians:this.$route.path.includes('/print')
		//我所需要的路由是('/print')和('/print-1V1'),
		//配置时设置('/print')也可以正常使用
	}
}

vue v-if v-show

v-if 通过创建和销毁DOM来显示或者隐藏DOM元素

1. v-if可以和v-else-if和v-else一起搭配使用
2. v-if可以直接作用在template标签上

<template>
    <div class="home">
        <template v-if="false">//此时该template下面的内容都是不可见的
            <h1>hahah</h1>
        </template>
    </div>
</template>

3. v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
4. 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show 通过控制DOM元素上的display属性进行显示隐藏的

注意，v-show 不支持 元素，也不支持 v-else

v-if 和 v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if 和 v-for官方建议不一起使用

因为v-if的优先级比v-for高，导致v-if会优先执行当v-if需要v-for里面的数据进行判断时可能就获取不到这样就会导致判断失效

如果想一起使用的话 可以将v-for移动到template标签上

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>
//将上面代码变成下面的
<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo }}
  </li>
</template>

v-for （把一个数组对应为一组元素）

可以用 in 也可以 of key最好加上以便它能跟踪每个节点的身份，从而重用和重新排序现有元素
tips:不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

        <ul>
            <li v-for="(item,index) in items" :key="index">{{ item .name }}</li><!--可以用in循环-->
        </ul>
        <ul>
            <li v-for="(item,index) of items" :key="index">{{ item .name }}</li><!--还可以用of循环-->
        </ul>

    data(){
        return {
            items:[
                {name:'勒布朗',age:36},
                {name:"戴维斯",age:26},
                {name:"威少",age:32},
                {name:"安东尼",age:37},
                {name:'霍华德',age:37}
            ],
        };
    },

还可以循环对象

• 第一个参数为对象中属性的值
• 第二个参数为对象中属性的属性名
• 第三个参数为循环的索引
  tips:在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它在不同 JavaScript 引擎下的结果都一致。

        <ul>
            <li v-for="(val,key,index) of lbj" :key="index">{{ val }}:{{ key }}:{{ index }}</li><!--还可以用of循环-->
        </ul>
                    lbj:{
                name:'勒布朗',
                age:36,
                team:"laker",
            }

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

数组的变更方法(这些都会改变原数组)

push() 添加数据 返回值为数组的长度
pop() 删除最后一个数据 返回被删除的数据
shift() 删除第一个数据 返回被删除的数据
unshift() 可想数组前面添加一个或多个元素 返回数组的长度
splice()
第一个参数代表删除的起始位置负数就倒着来，第二个代表删除的数量为0就代表不删除，第三个代表添加的数据
sort((a,b)=>a-b) 排序
reverse() 反转数组中的元素

替换数组(不会影响原数组，返回新的数组)

filter()筛选
concat()连接
slice()
第一个参数：规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）
第二个参数：规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）