带你详细了解Vue中的指令

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

v-model和修饰符

1. 作用：value属性和vue数据变量，双向绑定到一起

2. 双向绑定：

   • 变量变化-->视图自动同步
   • 视图变化-->变量自动同步

3. 主要用途：表单中

4. 应用场景：

   • 全选反选功能（非数组）
   • 考试系统（数组）
   • 手机用户信息：爱好 是否有以下XXX （数组）

5. select标签上：需要将v-model写在select上，里面的option里的value中需要设置

   复选框（checkbox）：需要将v-model写在input上，并都添加上value上

复选框双向绑定：

​ v-model绑定复选框时分两种情况，由变量的类型决定

1. 数组

   将复选框的value值放入数组中

2. 非数组（最终都会转成boolean）

   变量会收到一个boolean值，本质就是checked属性

==复选框双向绑定时分两种情况，如果绑定是数组，本质是将复选框的value值放入数组，如果绑定的是非数组，本质上将复选框的checked值同步给变量。==

6. 单选框：需要将v-model写在input上，里面的input里的v-model需要设置一样，里面再添加一个value值，用于后台交互

7. v-model.修饰符=“vue数据变量”

   修饰符：

   ​ .number 以parseFloat转成数值类型

   ​ .trim 去除首尾空白字符（中间空格无法去除）

   ​ .lazy 懒，在change（失去焦点）时触发而非input时

v-html

1. 作用：同innerHtml作用，会覆盖插值表达式

v-show和v-if以及v-else

v-show原理是 设置display:none

v-if 原理是从DOM树上移除

==v-else注意事项：他必须紧贴着v-if书写，中间不能隔其他标签以及换行==

2. 应用场景：

   • 频繁切换显示隐藏该应用： v-show
   • 如果元素可能一直不显示，应该用 v-if

3. 示范：

   <template>
     <div id="app">
       <h3>案例：折叠面板</h3>
       <div>
         <div class="title">
           <h4>芙蓉楼送辛渐</h4>
           <span class="btn" @click="isShow=!isShow">
             {{isShow?'收起':'展开'}}
           </span>
         </div>
         <div class="container" v-show="isShow">
           <p>寒雨连江夜入吴，</p>
           <p>平明送客楚山孤。</p>
           <p>洛阳亲友如相问，</p>
           <p>一片冰心在玉壶。</p>
         </div>
       </div>
     </div>
   </template>
   
   <script>
     export default {
       data() {
         return {
           isShow: true
         }
       },
     }
   </script>