vue简单实例（todolist）

最新推荐文章于 2022-08-30 21:46:48 发布
最新推荐文章于 2022-08-30 21:46:48 发布
阅读量689 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Queen_zdd/article/details/78342936
版权

本实例运用vue的一些常用指令如：v-for,v-on,v-model等；
v-on:click=”“可简写为@click=“”

vue+bootstrap实战

注：bootstrap是基于jQuery的，所以引入bootstrap的同时，需引入jQuery。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery-1.7.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:"#box",
                data:{
                    myData:[],
                    username:'',
                    age:'',
                    wage:''
                },
                methods:{
                    add:function(){
                        this.myData.push({
                            name:this.username,
                            age:this.age,
                            wage:this.wage//当点击添加时将name，age,wage推入myData中
                        });
                        this.username='';
                        this.age=''; //清空值
                        this.wage='';
                    },
                    deleteMsg:function(n){
                        if(n==-2){
                            this.myData=[];//点击全部删除
                        }else{
                            this.myData.splice(n,1);//删除
                        }
                    }
                }
            })
        }
    </script>
</head>
<body>
<div class="container" id="box">
    <form role="form">
    <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" class="form-control" id="username" v-model="username"   placeholder="请输入用户名.."/>
    </div>
        <div class="form-group">
            <label for="age">年 龄:</label>
            <input type="text" class="form-control" id="age" v-model="age" placeholder="请输入年龄.."/>
        </div>
        <div class="form-group">
            <label for="wage">工 资:</label>
            <input type="text" class="form-control" id="wage" v-model="wage" placeholder="工资.."/>
        </div>
        <div class="form-group">
            <input type="button" value="添加" class="btn btn-primary" @click="add()"/>
            <input type="reset" value="重置" class="btn btn-danger"/>
        </div>
    </form>
        <hr/>
        <table class="table table-bordered table-hover">
            <caption class="h3">用户信息表</caption>
            <tr>
                <th class="text-center">序号</th>
                <th class="text-center">用户名</th>
                <th class="text-center">年龄</th>
                <th class="text-center">工资</th>
                <th class="text-center">操作</th>
            </tr>
            <tr class="text-center" v-for="item in myData">
                <td>{{$index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.wage}}</td>
                <td>
                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"
                    @click="nowIndex=$index">删除</button>
                </td>
            </tr>
            <tr  v-show="myData.length!=0">
                <td colspan="5" class="text-center">
                    <button class="btn btn-danger"  @click="nowIndex=-2" data-toggle="modal" data-target="#layer">全部删除</button>
                </td>
            </tr>
            <tr v-show="myData.length==0">
                <td colspan="5" class="text-center">
                    暂无数据.....
                </td>
            </tr>
        </table>
    <div role="dialog" class="modal" id="layer">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                   <button class="close" data-dismiss="modal">
                       <span>&times</span>
                   </button>
                    确认删除吗？
                </div>
                <div class="modal-body text-right">
                    <button class="btn btn-primary" data-dismiss="modal" @click="deleteMsg()">确认</button>
                    <button class="btn btn-danger" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
Queen_zdd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue入门小例子
07-08
学习vue.js官网时,写的几个小例子.
Vue简单实例
qq_44864879的博客
09-09 284
1、html文件引入Vue <!-- 复制任意一个，贴在html页面head标签中 --> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue">&lt
vue.js最简单的例子
qq_30908729的博客
07-27 322
只需复制以下代码，新建一个html页面，用浏览器打开即可 源码地址：http://www.yayihouse.com/yayishuwu/chapter/1120
Vue简单练手案例
A_Common_Man的博客
05-05 4401
适合vue初学者的3个练手小案例，加深对数据驱动视图的理解，体会到与原生js直接操纵Dom节点的区别
vue生命周期转
浅夏博客
10-20 287
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
vue.js实例todoList项目
10-19
总结来说，这个Vue.js `todoList`项目展示了如何创建一个简单的待办事项列表，包括数据的定义、列表的渲染、事件监听以及数据驱动的视图更新。通过这个实例，开发者可以更好地理解Vue.js的基本概念，如组件、数据...
vue实现ToDoList简单实例
08-31
在本实例中，我们将探讨如何使用Vue.js创建一个简单的ToDoList应用，该应用包含添加任务、删除任务和全选删除功能。下面将详细阐述实现这个功能的关键步骤和涉及的技术。 首先，我们需要为页面添加基本的Bootstrap...
Vue小demo todoList记事本
10-14
在这个待办事项应用中，每个待办事项的状态（完成与否）和文本内容可能都是通过`v-model`与Vue实例的数据属性绑定的。 2. **组件化**：Vue.js鼓励将UI拆分成可重用的组件。在这个项目中，可能有一个`TodoItem`组件...
vue组件编写之todolist组件实例详解
08-28
Vue 组件编写之 TodoList 组件实例详解 本文将详细介绍 Vue 组件编写之 TodoList 组件的实例讲解，主要包括组件注册、模板编写、样式设计、事件处理等方面的知识点。 组件注册 在 Vue 中，组件注册是指将一个组件...
vue的一个简单实例
qq_40844663的博客
03-21 472
<div id="root"> <!-- 插值表达式 --> <p>hello {{name}}{{age}}{{skill}}</p> <!--该容器可以用双花括号的方法，直接使用变量值--> </div> <script src="./vue.js"></script> <script> Vue.config..
VUE前端小例子
03-25
VUE前端写的一个简单资产管理的小例子，里面有简单实现布局的代码。
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
vue简单项目实例（router方式）
07-04
vue-cli搭建的vue实例，用router和组件的简单实例，下载后请cnpm install后npm run dev运行
Vue的简单示例
weixin_43681591的博客
12-22 849
首先我们先来了解一下什么是Vue： Vue.js（它类似于 view） 它是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单。 如果要安装它的话可以采用下方建议： 第一种方法可以从 Vue.js 的官网上直接下载 vue.min.js来使用。 第二种方法使...
Vue---Todolist案例
一夜奈何梁山
08-30 617
导入包： <!-- 1:导入Vue包 --> <script src="js/vue.js"></script> 设置预加载和Vue对象： <!-- 2：设置预加载和Vue对象 --> <script> window.onload = function(){ var vm = new Vue({ el: ".list_con", d
vue简单实例
Dust的博客
01-27 130
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.4.1.js"></script> <script type="text/javascript" src="
vue最简单的例子
kioo_i_see的博客
05-15 485
下面为我创建一个最简单引入vue 的例子。 <!-- 引入vue标签使用vue的步骤 1. 创建一个html文档 2. 使用script标签引入vue 3. 在body标签中写入需要被显示的内容的标签。 需要注意两点，一点是 id 用来定位标签位置，{{}}用来定位显示的内容的位置 4. 用script标签，在里面创建vue对象用来对第3步的内容填充数据
Vue实例的一些简单方法
01-20 3941
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box"> {{a}} </div>
vue的todoList案例
m0_55916923的博客
08-30 1343
todolist案例
vue2.0实现todolist
最新发布
05-14
好的，下面是一个简单的 Vue 2.0 实现 todolist 的例子： 首先，我们需要创建一个 Vue 实例，并在 data 属性中定义一个数组 todos： ``` <!DOCTYPE html> <title>Vue Todo List Example ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值