可根据v-if="IsOk",动态判断标签是否展示

<template>
<div id="app">
<input type="text" v-model="todo" @keydown="addtodo($event)">
<hr>
未完成
<ul>
<li v-for="(item,key) in list" v-if="!item.checked"><input type="checkbox" v-model="item.checked">{{item.title}} <button @click="deltodo(key)">删除</button> </li>
</ul>
<hr>
已完成
<ul>
<li v-for="(item,key) in list" v-if="item.checked"><input type="checkbox" v-model="item.checked">{{item.title}} <button @click="deltodo(key)">删除</button> </li>
</ul>
</div>
</template> <script>
export default {
name: "app",
data() {
return {
todo: "",
list: []
};
},
methods: {
addtodo(e) {
console.log(e)
if (e.keyCode == ) {
this.list.push({ title: this.todo, checked: false });
this.todo = "";
}
},
deltodo(key) {
this.list.splice(key, );
}
}
};
</script> <style lang="scss">
</style>

Vue v-if ToolList的更多相关文章

  1. vue.js在windows本地下搭建环境和创建项目

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  2. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  3. Vue.js的从入门到放弃进击录(二)

    哇塞,昨晚更新的篇(一)这么多阅读量,看来入坑的人越来越多啦~熬了一个礼拜夜,今天终于生病惹~国庆要肥家咯·所以把篇(二)也更完.希望各位入坑的小伙伴能少跳几个坑呗.如果有什么不对的地方也欢迎讨论指正 ...

  4. vue初级学习--环境搭建

    一.导语 最近总想学点东西,es6啊.typescript啊,都想学,刚好有个机遇,可以学点vue,嗯,那就开始吧. 二.正文 1.node环境: 下载安装nodeJs,最好是1.6以上的版本,下载地 ...

  5. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  6. 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  7. 怎么看vue版本

    查看vue版本号是 vue -V 而不是npm vue -v ,npm vue -v 等同于npm -v vue -V: 后面那个V是大写的.

  8. vue不是内部或外部命令,配置一个Path系统变量就可以解决

    作为一个vue小白,最近为vue安装真是操碎了心.无论怎么查找网上的教程,还是解决不了"vue不是内部或外部的命令"诸如此类的问题.好在功夫不负有心人,终于在多次的试验下,成功解决 ...

  9. 如何用vue实现树形菜单?

    在公司培训了2周,布置的作业是从树形,grid分页以及echarts中选一个.由于都不是很熟,就挑了第一个.本来想在网上找找参考,然后模仿着做一个,但是网上的代码多少参差不齐,写到一半没了,所以只要自 ...

  10. vue初学者

    先分享一波福利 vue学习视频    链接:https://pan.baidu.com/s/1ggSfE75 密码:7h2a        1.先安装 webpack vue-cli          ...

随机推荐

  1. FS系统开发设计(思维导图)

      FS系统开发设计(思维导图) 最近做了一个小系统,公司应急,要对各个部门进行费用成本核算分摊,做运维,苦于无奈,简简单单的设计了一下,模仿用友ERP软件,首先对DB进行了初步设计,总体如下: 未完 ...

  2. QString字符串拼接【转载】

    原文网址:http://www.cnblogs.com/ftrako/p/3481571.html for(intloop=1;loop<2;loop++) { QStringtest1=QSt ...

  3. centos安装yum源

    网易(163)yum源是国内最好的yum源之一 ,无论是速度还是软件版本,都非常的不错,将yum源设置为163yum,可以提升软件包安装和更新的速度,同时避免一些常见软件版本无法找到.具体设置方法如下 ...

  4. 仿百度下拉关键词,和关键词的小demo

    自己做项目时用到的仿百度下拉关键词 代码: $(function(){ var oTxt = document.getElementById('search_text'); oTxt.onkeyup ...

  5. POJ1733:Parity game

    浅谈并查集:https://www.cnblogs.com/AKMer/p/10360090.html 题目传送门:http://poj.org/problem?id=1733 带权并查集裸题.区间和 ...

  6. hdu 4336 Card Collector —— Min-Max 容斥

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4336 bzoj 4036 的简单版,Min-Max 容斥即可. 代码如下: #include<cst ...

  7. Bug:DataGridCell的显示不完整

    最近在使用DataGrid时遇到一个bug, 在客户机器上DataGrid的内容显示不完整, 具体表现为某些列的显示为空. 具体的可视树为:DataGridCell > ContentPrese ...

  8. Azure VM从ASM迁移到ARM(二)

    在一中讨论了通过Azure平台的工具进行迁移的方案. 本文将讨论另外一种迁移方式.通过磁盘复制的方式,把部分VM迁移到ARM的Managed Disk模式. 一.  获得ASM中Disk的信息 在管理 ...

  9. 一个分类,两个问题之ArrayList

    前段时间,在做一个商品的分类,分类有3级,类似于以下这种形式的: ---食物 ---蔬菜 ---白菜 ---材料 ---鸡肉 ....... 而我需要做的是将取得的一个商品的字符串类型的分类ID集,然 ...

  10. lrzsz-串口传输文件

    二.编译安装 1.解压文件,进入目录     tar –zxvf lrzsz-0.12.20.tar.bz        cd / lrzsz-0.12.20 ./configure  2../con ...