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 相关文章推荐
jquery 问答知识整理
Feb 11 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
用PHP实现验证码功能
2006/10/09 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
php session的应用详细介绍
2017/03/22 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
react build 后打包发布总结
2018/08/24 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
简单谈谈Python中的反转字符串问题
2016/10/24 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
python 实现IP子网计算
2021/02/18 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
顶撞领导检讨书
2014/01/29 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
求职意向书范本
2015/05/11 职场文书