vue基础之事件v-onclick="函数"用法示例


Posted in Javascript onMarch 11, 2019

本文实例讲述了vue基础之事件v-onclick=函数用法。分享给大家供大家参考,具体如下:

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

事件:

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>3water.com 为data添加数据</title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.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>

运行效果:

vue基础之事件v-onclick=&quot;函数&quot;用法示例

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 点击按钮,div显示/消失,切换。v-show="a"</title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.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>3water.com vue简易留言本</title>
  <style>
  </style>
  <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="external nofollow" >
  <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.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,index) 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>×</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基础之事件v-onclick=&quot;函数&quot;用法示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 #Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 #Javascript
angular 实现下拉列表组件的示例代码
Mar 09 #Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 #Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 #Javascript
vue模块拖拽实现示例代码
Mar 09 #Javascript
Vue中的验证登录状态的实现方法
Mar 09 #Javascript
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
PHP教程 变量定义
2009/10/23 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
JS面向对象编程浅析
2011/08/28 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
vue项目引入ts步骤(小结)
2019/10/31 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中黄金分割法实现方法
2015/05/06 Python
浅谈python中的占位符
2017/11/09 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
Python多线程thread及模块使用实例
2020/04/28 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
中国央视网签名寄语
2014/01/18 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
企业宣传方案
2014/03/04 职场文书
公司授权委托书范本
2014/04/03 职场文书
英语教育专业自荐信
2014/05/29 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
淘宝好评语句大全
2014/12/31 职场文书
2015年仓库工作总结
2015/04/09 职场文书
代理词怎么写
2015/05/25 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python