vue教程1-04 事件 v-on:click="函数"  

v-on:click/mouseout/mouseover/dblclick/mousedown.....

实例：为data添加数据

实例，点击按钮，div显示/隐藏切换

实例，vue实现简易留言本

事件:

        v-on:click="函数"

        v-on:click/mouseout/mouseover/dblclick/mousedown.....

        new Vue({

            el:'#box',

            data:{ //数据

                arr:['apple','banana','orange','pear'],

                json:{a:'apple',b:'banana',c:'orange'}

            },

            methods:{

                show:function(){    //方法，这里是show，不能用alert

                    alert(1);

                }

            }

        });

实例：为data添加数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title> </title>

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{ //数据

                    arr:['apple','banana','orange','pear'],

                    json:{a:'apple',b:'banana',c:'orange'}

                },

                methods:{

                    add:function(){

                        this.arr.push('tomato');//this指代new Vue()，也是data

                    }

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <input type="button" value="按钮" v-on:dblclick="add()">

        <br>

        <ul>

            <li v-for="value in arr">

                {{value}}

            </li>

        </ul>

    </div>

</body>

</html>

 实例：点击按钮，div显示/消失，切换。v-show="a"

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{ //数据

                    a:true

                },

                methods:{

                    adjust:function(){

                        console.log(this.a);

                        if(this.a == true){

                            this.a = false;

                        }else{

                            this.a = true;

                        }

                    }

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <input type="button" value="按钮" v-on:click="adjust()">

        <div style="width:100px; height:100px; background: red" v-show="a">

        </div>

    </div>

</body>

</html>

 实例：vue简易留言本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    </style>

    <link rel="stylesheet" href="lib/bootstrap.min.css">

    <script src="lib/jquery-1.7.2.js"></script>

    <script src="lib/bootstrap.js"></script>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{

                    myData:[],

                    username:'',

                    name:'',

                    age:'',

                    nowIndex:-100

                },

                methods:{

                    add:function(){

                        this.myData.push({

                            name:this.username,

                            age:this.age

                        });

                        this.username='';

                        this.age='';

                    },

                    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" id="username" class="form-control" placeholder="输入用户名" v-model="username">

            </div>

            <div class="form-group">

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

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

            </div>

            <div class="form-group">

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

                <input type="reset" value="重置" class="btn btn-danger">

            </div>

        </form>

        <hr>

        <table class="table table-bordered table-hover">

            <caption class="h3 text-info">用户信息表</caption>

            <tr class="text-danger">

                <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>

                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>

                </td>

            </tr>

            <tr v-show="myData.length!=0">

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

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

                </td>

            </tr>

            <tr v-show="myData.length==0">

                <td colspan="4" class="text-center text-muted">

                    <p>暂无数据....</p>

                </td>

            </tr>

        </table>

        <!--模态框 弹出框-->

        <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">

            <div class="modal-dialog">

                <div class="modal-content">

                    <div class="modal-header">

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

                            <span>&times;</span>

                        </button>

                        <h4 class="modal-title">确认删除么?</h4>

                    </div>

                    <div class="modal-body text-right">

                        <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>

                        <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

vue教程1-04 事件 v-on:click="函数"的更多相关文章

  1. vue 的点击事件怎么获取当前点击的元素

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元   首先 vue的点击事件 是用 @cl ...

  2. vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件

    vue教程1-05 事件 简写.事件对象.冒泡.默认行为.键盘事件 v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @clic ...

  3. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  4. [转]vue数据绑定(数据,样式,事件)

    1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...

  5. Vue样式绑定和事件处理器

    一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...

  6. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  7. CPF 入门教程 - 属性和事件（七）

    CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...

  8. Vue（四）事件和属性

    1. 事件 1.1 事件简写 v-on:click="" 简写方式 @click="" <button v-on:click="show&quo ...

  9. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

随机推荐

  1. Codeforces Round #542(Div. 2) CDE 思维场

    C https://codeforces.com/contest/1130/problem/C 题意 给你一个\(n*m\)(n,m<=50)的矩阵,每个格子代表海或者陆地,给出在陆地上的起点终 ...

  2. 委托构造函数(c++11)

    1.概念 1)委托构造函数也是构造函数,它也有形参列表,它将实参传递给其他的构造函数来初始化类对象,像是把自己的一些(或者全部)构造职责委托给其他构造函数一样

  3. 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了

    首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...

  4. 【慕课网实战】Spark Streaming实时流处理项目实战笔记九之铭文升级版

    铭文一级: 核心概念:StreamingContext def this(sparkContext: SparkContext, batchDuration: Duration) = { this(s ...

  5. C#重点内容之：接口（interface）（一）网络初级示例

    这一篇来源于网络,简单介绍了接口的概念 接口是体现面向对象编程思想优越性的一件利器,为什么这么说呢? 首先我们来看,接口是为继承而存在的,如果没有继承,那就自然不需要接口了,既然有继承,那就需要把可能 ...

  6. 进程之multiprocessing

    进程的状态:

  7. Hausdorff Distance(豪斯多夫距离)

    Hausdorff Distance(豪斯多夫距离) 参考博客:http://cgm.cs.mcgill.ca/~godfried/teaching/cg-projects/98/normand/ma ...

  8. floyd算法之最小环问题

    最小环问题:都比较容易得到从u 到 v 经过中间某一些结点的最短路,但是我们得确保回来的时候,不能经过那些结点,这样我们就需要改一下floyd算法了 进而我们想到用Floyd算法.我们知道,Floyd ...

  9. es快捷键

    ctrl+b ,从xml中的Design定位到代码中 ctrl+shift+t查找这个类,下面会显示类的路径,包括jar名 shift + ctrl + / :注释,如果选中多行的话,则会把选中区域注 ...

  10. css中box-sizing简单说明（标准盒式模型和怪异盒式模型）

    今天写程序做布局的时候,遇到关于css中盒式模型的问题,百度了下这属性的解释,脑大啊,文字太绕看不懂.怎么办,于是自己动动手写了段程序测试,嗯,不错,一看效果就恍然大明白了.这里简单说明下,也可能说得 ...