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 相关文章推荐
js类型检查实现代码
Oct 29 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
每天学点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批量上传的实现代码
2013/06/09 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
微信小程序实现左滑动删除效果
2020/03/30 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
对于Python的框架中一些会话程序的管理
2015/04/20 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
毕业自我评价范文
2013/11/17 职场文书
军训自我鉴定
2013/12/14 职场文书
优良学风班总结材料
2014/02/08 职场文书
法语专业求职信
2014/07/20 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
导游词之潮音寺
2019/09/26 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
python_tkinter事件类型详情
2022/03/20 Python
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis