Vue 指令篇

1. 内置指令

• v-show :
  • 说明：根据条件展示元素,true展示元素，false隐藏元素
  • 版本：vue2,vue3

<template>     <div>         <button v-show="isShow"></button>     </div> </template>  <script> export default {     name: 'HomeView',     data() {         return {             isShow: false         };     } }; </script> 

注意：v-show 不支持写在 template 元素标签上，也不支持同时写在 v-else 标签中

v-show 是采用切换css属性display:block,display:none来控制显示或隐藏dom，所以初始页面render时，此dom就会渲染至页面中，只不过是隐藏状态。

• v-if:
  • 说明：根据条件展示元素,true在dom树中渲染元素，false从dom树中移除元素
  • 版本：vue2,vue3

<template>     <div>         <button v-if="isShow"></button>     </div> </template> <script> export default {     name: 'HomeView',     data() {         return {             isShow: false         };     } }; </script> 

v-if可以作用于template中，如果表达式为true，那么template标签块中的代码都会渲染，反之都不渲染

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

• v-else
  • 说明：表示 v-if 的“else 块”
  • 版本：vue2,vue3

<template>     <div>         <button v-if="isShow">按钮1</button>         <button v-else>按钮2</button>     </div> </template>  <script> export default {     name: 'HomeView',     data() {         return {             isShow: false         };     } }; </script> 

v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别

• v-else-if
  • 说明：表示 v-if 的“else 块”
  • 版本： 2.1.0 新增,vue2,vue3

<template>     <div>         <button v-if="type === 'a'">按钮a</button>         <button v-else-if="type === 'b'">按钮b</button>         <button v-else-if="type === 'c'">按钮c</button>         <button v-else="type === 'd'">按钮d</button>     </div> </template>  <script> export default {     name: 'HomeView',     data() {         return {             type: 'a'         };     } }; </script> 

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

• v-bind
  • 说明：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式
  • 版本：vue2,vue3
  • 缩写：:

a. 绑定一个 attribute

<template>     <div>         <img v-bind:src="imgSrc" />         <img :src="imgSrc" />     </div> </template>  <script> export default {     name: 'HomeView',     data() {         return {             imgSrc: 'https://picsum.photos/200/300/?random'         };     } }; </script> 

b. class 绑定

<template>     <div>         <div :class="{ red: isRed }"></div>         <div :class="[classA, classB]"></div>         <div :class="[classA, { classB: isB, classC: isC }]"></div>     </div> </template>  <script> export default {     name: 'HomeView',     data() {         return {             isRed: true,             classA: 'classA',             classB: 'classB',             isB: true,             isC: true         };     } }; </script> 

c. style 绑定

<template>     <div>         <div :style="{ fontSize: size + 'px' }"></div>         <div :style="[styleObjectA, styleObjectB]"></div>     </div> </template>  <script> export default {     name: 'HomeView',     data() {         return {             size: 20,             styleObjectA: {                 color: 'red',                 fontSize: '20px'             },             styleObjectB: {                 color: 'blue',                 fontSize: '30px'             }         };     } }; </script> 

d. 组件传值

<template>     <div>         <child-component :title="text" />     </div> </template>  <script> export default {     name: 'HomeView',     components: {         'child-component': {             props: {                 title: String             },             template: '<div>{{ title }}</div>'         }     },     data() {         return {             text: 'test'         };     } }; </script> 

e. 传递当前所有 props

<template>     <div>         <child-component v-bind="$props" />     </div> </template>  <script> export default {     name: 'HomeView',     components: {         'child-component': {             props: {                 title: String             },             template: '<div>{{ title }}</div>'         }     },     props: {         propsValue: String     },     data() {         return {             text: 'test'         };     } }; </script>