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 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 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
透析PHP的配置文件php.ini
2006/10/09 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
恶意软件的定义
2014/11/12 面试题
编辑个人求职信范文
2013/09/21 职场文书
思想汇报格式
2014/01/05 职场文书
安全先进班组材料
2014/12/26 职场文书
小学新课改心得体会
2016/01/22 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
总结Python常用的魔法方法
2021/05/25 Python
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
java executor包参数处理功能 
2022/02/15 Java/Android