【day 02】vue的相关指令1

内容渲染指令

条件渲染指令

v-if

条件性的渲染一块内容 判断为true才会被渲染

v-else

两个分支 同一个判断语句

v-else-if

多个分支 标题的判断语句

应用： 加载的图标 回到顶部 侧边栏

v-show

修改dom的display

v-if和v-show 的区别

v-if 为false 元素直接不存在 什么都不做
v-show 为false 只是不显示 元素还在的 存在于dom里面

如果你的dom 需要频繁切换状态 使用v-show
只切换次数状态少 使用 v-if

v-once(了解)

解除动态的关联 只会渲染一次（一次性的指令）
我是一个加载中的图标
修改bool值 视图不会发生改变

属性绑定指令

v-bind

<img v-bind:src="imgSrc" alt="">
v-bind:属性 = '属性值' 属性值 识别为 vue实例内的数据  {{}}

简写方式

 <img :src="imgSrc" alt="">

v-bind 动态绑定class

第一种方式（字符串的写法 ）

<!-- class类名  不确定  比如说是请求获取的类名 -->
<span class="box" :class="iconClass">我是一个加载中的图标</span>

第二种方式（对象的写法）

<span class="box" :class="{iconClass:bool}">我是span</span>
 <!-- :class="{类名:判断条件}" -->

 bool为 true 具备iconClass这个类名 
 false 没有这个类名 

 <span class="box" :class="{iconClass:bool}">1</span>
 <br>
 <span class="box" :class="{iconClass:!bool}">2</span>
 <br>
 <button v-on:click="fn">修改bool</button>

 data() {
     return {
       bool: true
     }
   },
   methods: {
     //自定义的方法(函数)
     fn: function () {
       this.bool = !this.bool
     }
   },

第三种方式（数组的写法）

v-bind 动态绑定style

某一个样式 有动态的变化 比如高度 透明度

第二种方式 对象写法

第三种 数组写法

事件绑定指令

绑定style
某一个样式 有动态的变化 比如高度 透明度

第二种方式 对象写法

第三种 数组写法

事件绑定指令