专栏首页雪胖纸的玩蛇日常6.条件渲染v-if、监听键盘事件$event

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • xBIM 实战04 在WinForm窗体中实现IFC模型的加载与浏览

      WPF底层使用 DirectX 进行图形渲染。DirectX 能理解可由显卡直接渲染的高层元素,如纹理和渐变,所以 DirectX 效率更高。而 GDI/...

    张传宁老师
  • xBIM 基础08 WeXplorer 简介

      WeXplorer 是 XBIM 工具包的可视化部分,它使用预处理的 WexBIM 文件在 Web 上处理 IFC 数据的可视化。 它使用像 WebGL 这...

    张传宁老师
  • xBIM 实战03 使用WPF技术实现IFC模型的加载与浏览

      WPF应用程序在底层使用 DirectX ,无论设计复杂的3D图形(这是 DirectX 的特长所在)还是绘制简单的按钮与文本,所有绘图工作都是通过 Dir...

    张传宁老师
  • xBIM 基础12 WeXplorer xViewer的导航、相机、剖切、隐藏等操作

      本篇将学习xViewer的导航,剪切和隐藏。这应该足以使用户能够通过所有缩放,平移,轨道运行和隐藏可能的障碍物来检查建筑物内部。点击这里可以看到完整的实例。

    张传宁老师
  • 探寻浏览器渲染的秘密

    起因是这样,有运营小姐姐跟我反馈某个页面卡顿的厉害。心中突然一想,妈耶不会有bug吧,心慌慌的。然后自己打开页面,不卡呀,流畅的一xx,肯定是她弄错了。带着去教...

    桃翁
  • React学习(4)-理清React的工作方式

    在接触React之前,我们也许习惯了DOM编程,那它相比于原生JS,JQ编程方式,究竟有什么区别?React的工作方式是什么样子的?所谓的虚拟DOM又指的是什么...

    itclanCoder
  • 个推数据可视化之人群热力图、消息下发图前端开发实践

    随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累...

    个推
  • react-native布局与组件

    一款好的App离不开漂亮的布局,RN中的布局方式采⽤的是FlexBox(弹性布局) 。

    一粒小麦
  • 1500行TypeScript代码在React中实现组件keep-alive

    例如后端用到的Kafka , redis , sql事务写入 ,Nginx负载均衡算法,diff算法,GRPC,Pb 协议的序列化和反序列化,锁等等,都可以在前...

    Peter谭金杰
  • 探寻浏览器渲染的秘密

    起因是这样,有运营小姐姐跟我反馈某个页面卡顿的厉害。心中突然一想,妈耶不会有bug吧,心慌慌的。然后自己打开页面,不卡呀,流畅的一xx,肯定是她弄错了。带着去教...

    胡哥有话说

扫码关注云+社区

领取腾讯云代金券