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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
jquery对表单操作2
2011/04/06 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python 获取url中的参数列表实例
2018/12/18 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python中dict和set的用法讲解
2019/03/28 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
python爬虫工具例举说明
2020/11/30 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
学习心得体会
2014/01/01 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
五一劳动节活动记录
2014/03/23 职场文书
正科级干部考察材料
2014/05/29 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript