Vueday03

一.v-model

作用：用于进行表单数据双向绑定

<input type="text" v-model:value="value1" />
      <!-- 简写的话直接省略  ：value -->
<input type="text" v-model="value2" />

二.Vue中样式的使用分为两种

1.class类型样式分为四种

1. 数组

<div :class="[class01,class02]">1、数组1、数组1、数组1、数组</div> 

2. 三目表达式

<div :class="age>17?class01:class02">三目表达式</div>

3. 对象

<div :class="class03">对象 对象 对象 对象</div>

4. 数组内置对象

<div :class="class04">数组内置对象 数组内置对象</div>

2.style（也叫做内联样式）类型分为三种

1. 对象

<div :style="style">colorcolorcolor</div>

2. 数组

<div :style="[style01,style02]">colorcolorcolorcolorcolorcolor</div>

3. 函数返回值

<div :style="getColor(2)">3、函数返回值</div>

三.V-if 与V-show的异同

相同点：都是显示和隐藏元素

不同点：v-show:display:none显示和隐藏元素， v-if：通过删除dom元素

应用场景：只修改一次的时候可以使用v-if，频繁切换的时候可以使用v-show