Vue-更改属性（v-bind），显示切换（v-show和v-if）

Vue显示切换

• 显示切换有两种指令
  1. v-show:‘bool’
  2. v-if:‘bool’
• 他们的区别是：
  1. v-show的实质是改变了元素的diplay属性，只是隐藏了元素，元素本身并没有在代码中消失
  2. v-if的实质是吧元素从dom中删除，直接没有了这个元素，使用我们看不见它了
  3. 在平常使用的过程中，频繁切换显示的话就用v-show

v-show和v-if用法

• 在进行是否隐藏和显示的时候，主要看的就是里面的值是否为true或者false
• 那么我们可以有多种方法进行判断真假
  1. v-show:“age>=18” ：这个的意思是当age满足大于等于18时，那么这个图片就可以被显示出来
  2. v-show:“isTrue”, isTure=!isTure :假设前面一个是在html中，后面在vue代码中，这样我们就可以实现随时切换显示状态了

更改属性

• v-bind：属性名=“更改的值”。
• 也可以简写为，：属性名=“更改的值”

v-bind常用用法

在进行class绑定，有3种方法：

1. 字符串绑定方法

<div :class="类名"></div>

2. 对象方法：（{class变量：真假变量}）

• 这个的意思是，我们给一个包含class名的对象，通过对象属性的真假。
• 如果后面为真，那么就赋予这个class变量，反之同理

<div>
    <img  :class='arryC' >
</div>
 <script>
     new Vue({
         el:'div',
         data:{
              arryC:{
		        c1:true,  //c1和c2都是类名
		        c2:true
		      }
         },
     })

3. 数组方法

• 对象的绑定方法：在对象中的一些的属性，当属性为true的时候就可以绑定，为false的时候就不绑定
• 我们可以通过操作数组的元素，来操作绑定的class

<div>
    <img  :class='arryD' >
</div>
 <script>
     new Vue({
         el:'div',
         data:{
              arryD:['c1','c2']
         },
     })

在进行style绑定，有3种方法【常用一种】：

1. 直接使用方法：:style="{属性名:变量}"

<div :style="{color:x1,opacity:x2}">xxx</div>

data{
	x1:"red",
	x2:0.1
}

2. 对象写法: :style=“对象名”

<div :style="objstyle">xxx</div>

data{
	objstyle:{
		color:'red',
		opacity:0.5,
		fontSize:'50px'
	}
}