对于vue.js，不想多比比，直接搞上源码+图片

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Bootstrap 实例 - 模态框（Modal）插件</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>

    <!--<script src="https://cdn.bootcss.com/vue/1.0.27/vue.js"></script>-->

</head>

<body>

<!-- 2.0往上的版本已经不支持v-for中的$index和$key了 -->

<div class="container-fluid" id="box1">

    <h2 class="text-center">创建模态框（Modal）</h2>

    <form role="form" class="clearfix form">

        <div class="form-group">

            <label for="name" class="h3">名称:</label>

            <input type="text" class="form-control" id="name" v-model="username" placeholder="请输入名称">

        </div>

        <div class="form-group">

            <label for="age" class="h3">年龄:</label>

            <input type="text" class="form-control" id="age" v-model="age" placeholder="请输入你的年龄">

        </div>

        <div class="form-group pull-right">

            <input v-on:click = "add()" type="button" class="btn btn-primary" value="确定">

            <input type="reset" class="btn btn-success" value="取消">

        </div>

    </form>

    <table class="table text-center table-hover">

        <thead>

            <tr>

                <th class="text-center">序号</th>

                <th class="text-center">姓名</th>

                <th class="text-center">年龄</th>

                <th class="text-center">操作</th>

            </tr>

        </thead>

        <tbody>

        <tr v-for="item in mydata">

            <td>{{$index+1}}</td>

            <td>{{item.name}}</td>

            <td>{{item.age}}</td>

            <td>

                <a class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">删除</a>

            </td>

        </tr>

        <tr v-show="mydata!=''">

            <td colspan="4" class="text-right">

                <button v-on:click="newindex = -5" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">删除全部</button>

            </td>

        </tr>

        <tr v-show="mydata==''"><td colspan="4" class="text-center text-moted">暂无数据</td></tr>

        </tbody>

    </table>

    <!-- 模态框（Modal） -->

    <div role="dialog" class="modal fade bs-example-model-lg" id="myModal">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal">

                    &times;

                </button>

                <h4 class="modal-title">

                    模态框（Modal）标题{{newindex}}

                </h4>

            </div>

            <div class="modal-body">

                您确定删除吗？

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-success" data-dismiss="modal">

                    {{reset}}

                </button>

                <button type="button" v-on:click="delectmsg(newindex)" class="btn btn-danger" data-dismiss="modal">

                    {{enter}}

                </button>

            </div>

        </div>

    </div>

</div>

<script>

    window.onload = function () {

        new Vue({

            el: '#box1',

            data: {

                mydata:[],

                username:'',

                age:'',

                newindex: -100,

                enter:"确定",

                reset:"取消"

            },

            methods:{

                add:function () {

                    this.mydata.push({

                        name:this.username,

                        age:this.age

                    });

                    this.username = '';

                        this.age = '';

                },

                delectmsg:function (n) {

                    if(n == -5){

                        this.mydata = [];

                    }else {

                        this.mydata.splice(n,1);

                    }

                }

            }

        });

    };

</script>

</body>

</html>

图片示意

直接复制代码保存为以.html或是.htm结尾的文件测试下即可，简单粗暴，好用

不过在此我要说出一个问题，就是vue.js低版本的在v-for 这个标签中可以使用$index这个内置变量。意义为索引，但是在高版本中就取消了，替换的内容不知道修改为什么了。搜了一些，都是一些带有vue的模板(可兼容html5的代码模板)

关于v-for版本2.0与1.x的区别

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            a{display: block;}

        </style>

    </head>

    <body>

        <div id="for5">

            <a v-for="(item,index) in items" v-on:click="onclick(index)" href="javascript:void(0)">{{ index }}{{ item.text }}</a>

        </div>

        <input type="text" name="" id="index" value=""/>

    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        new Vue({

            el: '#for5',

            data: {

                items: [

                    { text: '巴士' },

                    { text: '快车' },

                    { text: '专车' },

                    { text: '顺风车' },

                    { text: '出租车' },

                    { text: '代驾' }

                ]

            },

            methods: {

                onclick:function(index){

                    console.log(index);

                    document.getElementById('index').value = index;

//                  window.location.href = "http://www.baidu.com";

                    window.location.href = "#";

                }

            }

        })

    </script>

    </body>

</html>

　变化如下：

  1. el处需id，写body报错；
  2. 参数index需写在item后面；
  3. 作为事件参数时不用加$符。

　　此外，也可以提供第二个的参数为键名：

<div v-for="(value, key) in object">

  {{ key }} : {{ value }}

</div>

第三个参数为索引：

<div v-for="(value, key, index) in object">

  {{ index }}. {{ key }} : {{ value }}

</div>

欢迎各位大神留言沟通

vue.js cdn引入 http://www.bootcdn.cn/

我推荐使用百度静态资源库 http://cdn.code.baidu.com/

详细可参考  https://vuefe.cn/v2/guide/list.html

vue.js实践应用的更多相关文章

  1. 一个简单的 vue.js 实践教程

    https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...

  2. Vue.js组件间通信方式总结

    平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子 ...

  3. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  4. Vue.js最佳实践

    Vue.js最佳实践 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ t ...

  5. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core，如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  6. Vue.js最佳实践--给大量子孙组件传值(provide/inject)

    开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...

  7. 《Vue.js 2.x实践指南》 已出版

    <Vue.js 2.x实践指南>其实在一年前就已经完稿了,只是由于疫情的缘故耽搁了很久才下厂印刷.阅读本书需要具备HTML.CSS和JS基础,本书针对的用户群体主要是:想要快速学习vue技 ...

  8. 前端开发工具vue.js开发实践总结

    最近有很长时间没有更新博客了,换了公司,全部的心思都放在项目上了.通过这次项目的上线,让我感受最深的是前后端分离后,前端页面的模块化管理,以及前端页面的数据邦定.在接触vue.js之前,我之前端要用到 ...

  9. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

随机推荐

  1. 随机练习：C#实现维吉尼亚加密与解密（解密前提为已知密匙）

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  2. html学习笔记（一）div的透明设置

    要使得div的透明度设置,有两种方法. 第一种:使用opacity属性,单词的意思是不透明性,你可以设置它的值,范围是0到1,1为不透明,0为全透明.具体使用如下: css代码: #div01{ ba ...

  3. JS判断web网站访问端是PC电脑还是手机

    通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! <script type="text/javascript"> <!-- //平台.设备和操 ...

  4. Android 监听APP进入后台或切换到前台方案对比

    在我们开发的过程中,经常会遇到需要我们判断app进入后台,或者切换到前台的情况.比如我们想判断app切换到前台时,显示一个解锁界面,要求用户输入解锁密码才能继续进行操作:我们想判断app切换到后台,记 ...

  5. 夜色的 cocos2d-x 开发笔记 03

    本章添加敌人,首先我们在.h文件里添加新的方法 之后进入.cpp文件,写出方法内容 当然还要调用一次,我把这个方法添加在了这里,也就是和发子弹是同步的,当然想要多久调用一次大家可以自己调整 运行一下 ...

  6. EF--payload or not

    负载加载非负载加载适用于多对多场境. 一.非负载(payload-free)加载 1.1创建表 create table Album ( AlbumId ,), AlbumName ) ) creat ...

  7. python模块详解 XML

    XML模块 XML是实现不同语言或程序之间进行数据交换的协议,和json一样. XML格式: <?xml version="1.0" encoding="UTF-8 ...

  8. SharePoint 2010 列表查阅项栏的formfield控件对象取值

    开发的时候想当然的认为主表解析出来就是一个dropdownlist,可是在大数据测试的时候,发现有情况. 首先创建一个子列表:DetailList,并添加19条数据: 创建主列表:MainList,并 ...

  9. Centos 6/RHEL disable the IPv6 module.

    http://minimallinux.blogspot.com/2013/07/centos-6rhel-disable-ipv6-module.html IPv6 was introduced t ...

  10. robotframework实战二---Jenkins连用

    1.下载插件robot Jenkins环境搭建就不用说了,网上有很多帖子,你在使用时,你需要做以下几步 因为目前我已经安装了 2.新建项目 因为有重名的项目,所以会提示以下内容 你需要配置的内容就两处 ...