Vue指令

# Vue 指令

虽然学习完了 Vue，但还有许多地方木有掌握，所以今天就来复习一下 Vue 还没有掌握的指令

• 按键修饰符

• 条件渲染指令

• 循环渲染指令

  虽然只有一些内容，但还是要认真的写下去，不然就得去平板看我写的丑不拉几的字，我实在不忍心看下去，这也是在这里复习的原因之一。

# 按键修饰符

在监听键盘事件的时候，我们需要判断详细的按键，此时，可以为键盘相关的事件添加按键修饰符

举一个非常简单的案例，当我们在登录页面输入完密码之后，按下回车键后使用 Ajax 发送数据 如何实现捏？

我们可以使用 @keyup 事件

<input type="password" @keyup.enter="commitAjax">

这样在 input 表单中按下回车键就可以触发方法了 非常的方便，学废了。

# 条件渲染指令

这个好像挺简单的，既然打出来了，全当复习用了
这个东西主要用来辅助开发者按需控制 DOM 的显示与隐藏
但是条件渲染指令有两个

• v-if
• v-show

两者区别不大 但还是要讲一讲

继续举一个简单地例子

<p v-if="flag">这是被 v-if 控制的元素</p>

<!-- ------- 当 flag 为 false 的时候两者都会隐藏 但是隐藏的方法不一样 -------- -->

<p v-show="flag">这是被 v-show 控制的元素</p>

v-if 会动态创建元素或者移除
v-show 则是给元素添加 display:none; 样式 来实现元素的显示和隐藏

差点忘记了还有一个 v-else

v-else 指令必须搭配 v-if 来进行使用 否则将不会被识别 来看个简单地例子就会了

<div v-if="type === 'A'">优秀</div>

    <div v-else-if="type === 'B'">良好</div>

    <div v-else-if="type === 'C'">一般</div>

    <div v-else>差</div>

是不是很简单呢

# 循环渲染指令

实际上这个才是我要复习的内容，前面两个都太简单了，虽然这个也是，看看文档就会了，但是为了以后不用看文档，所以才认真写一写吧

V-for 列表渲染指令，用于开发者基于一个数组来循环渲染一个列表结构

先来看看代码

data:{

  // 列表数据

  list[

    {id: 1 ,name: '木子日天' },

    {id: 2 ,name: '李日天' },

    {id: 3 ,name: '木子昊' },

  ]

}

要循环那个 DOM 就给那个加上 v-for="item in list"

<div v-for='item in list'>

  <p> { item.id } ,{ item.name }</p>

</div>

item 是循环的每一项
list 是被循环的数组

结果就是

1,木子日天

  2,李日天

  3,木子昊

使用了 v-for 指定那么一定要绑定一个 :key 属性

<div v-for="item in list" :key="item.id">

  <p>{ item.id } ,{ item.name }</p>

</div>

就酱紫 拜拜