6.条件渲染v-if、监听键盘事件$event

• 2019 年 10 月 10 日
• 筆記

1.条件渲染v-if、监听键盘事件$event

<template>    <div id="app">      <!-- 监听键盘事件 -->      <input type="text" v-model="todo" @keydown="AddText($event)">        <br>      <hr>        <h2>未完成</h2>      <ul>        <li v-for="(item,index) in list" :key="index">          <div v-if="!item.checkbox">            <input type="checkbox" v-model="item.checkbox"> {{item.title}}---<button @click="RemoveText(index)">删除</button>          </div>        </li>      </ul>      <h2>已完成</h2>      <ul>        <li v-for="(item,index) in list" :key="index" class="finish">          <div v-if="item.checkbox">            <input type="checkbox" v-model="item.checkbox"> {{item.title}}---<button @click="RemoveText(index)">删除</button>          </div>        </li>      </ul>      </div>  </template>  <script>  export default {    name: 'app',    data () {      return {        todo:'',        list:[],      }    },    methods:{      AddText(e){        console.log(e.keyCode)        // 如果点击回车键        if(e.keyCode==13){          this.list.push({title:this.todo,checkbox:false})          this.todo=''        }        },      RemoveText(key){        this.list.splice(key,1)      }      }  }  </script>  <style>  ul li{  list-style-type:none;  }  .finish{   background-color: #eee  }  </style>

 vi-if与v-show用法相同，v-if是代表根据条件渲染，v-show是代表将所有的都渲染出来，根据条件显示。