Vue入门（2）绑定样式和渲染、监视数据、表单、过滤器、指令、生命周期

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

---

绑定样式和渲染

绑定样式

1.在应用界面中，某个(些)元素的样式是变化的一

2.class/style 绑定就是专门用来实现动态样式效果的技术。

class样式

写法:class=“xxx” xxx可以是字符串、对象、数组。

   字符串写法适用于：类名不确定，要动态获取。

   对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

   数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

style样式

:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。

渲染

条件渲染

v-if

(1).v-if="表达式"
(2).v-else-if="表达式"	
(3).v-else="表达式"

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

v-show

v-show="表达式"

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

列表渲染

用于展示列表数据

v-for="(item, index) in xxx" :key="yyy"

可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<!-- 遍历数组 -->
 <h2>人员列表（遍历数组）</h2>
    <ul>
      <li v-for="(p,index) of persons" :key="index">
         {
   {
   p.name}}-{
   {
   p.age}}
      </li>
    </ul>
    //
data:{
   
  persons:[
     {
   id:'001',name:'张三',age:18},
     {
   id:'002',name:'李四',age:19},
     {