zoukankan      html  css  js  c++  java
  • 6.条件渲染v-if、监听键盘事件$event

    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是代表将所有的都渲染出来,根据条件显示。

  • 相关阅读:
    避免使用HttpClient的系统代理
    C#使用ILGenerator动态生成函数
    leveldb和fork的初始化顺序
    模拟阻尼运动
    [c++]printf的编译器静态检测
    Git Submodule管理项目子模块
    redis 读写分离主从服务类借鉴
    git pull 冲突
    git log 查看提交记录
    自带单例模式的redis类
  • 原文地址:https://www.cnblogs.com/xuepangzi/p/11601312.html
Copyright © 2011-2022 走看看