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 是代表将所有的都渲染出来, 根据条件显示.
来源: http://www.bubuko.com/infodetail-3216502.html