• 贵州省社科规划办与贵州日报社合作推出“文化贵州”专栏 2019-03-20
  • 就算不为了世界杯,俄罗斯也有那么多时髦好去处值得你飞去 2019-03-20
  • 十一运夺金玩法介绍:vue基础之事件v-onclick="函数"用法示例

    山西体彩11选5直选遗漏 www.caxru.com  更新时间:2019年03月11日 08:42:18   作者:白杨-M   我要评论

    这篇文章主要介绍了vue基础之事件v-onclick="函数"用法,结合实例形式分析了vue.js事件v-on:click="函数"的data数据添加、点击响应、以及留言本功能相关操作技巧,需要的朋友可以参考下

    本文实例讲述了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>山西体彩11选5直选遗漏 www.caxru.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>
    
    

    运行效果:

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>山西体彩11选5直选遗漏 www.caxru.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>山西体彩11选5直选遗漏 www.caxru.com vue简易留言本</title>
      <style>
      </style>
      <link rel="stylesheet"  rel="external nofollow" >
      <script src="//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>
    
    

    运行效果:

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

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

    相关文章

  • 详解vue中引入stylus及报错解决方法

    详解vue中引入stylus及报错解决方法

    这篇文章主要介绍了详解vue中引入stylus及报错解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 基于vuejs实现一个todolist项目

    基于vuejs实现一个todolist项目

    这篇文章主要为大家详细介绍了基于vuejs实现一个todolist项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Vue shopCart 组件开发详解

    Vue shopCart 组件开发详解

    这篇文章主要介绍了Vue shopCart 组件开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue路由组件按需加载的几种方法小结

    vue路由组件按需加载的几种方法小结

    这篇文章主要介绍了vue路由组件按需加载的几种方法小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue使用rem实现 移动端屏幕适配

    vue使用rem实现 移动端屏幕适配

    这篇文章主要介绍了vue使用rem实现 移动端屏幕适配的相关知识,通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下
    2018-09-09
  • 最新评论

    常用在线小工具

  • 贵州省社科规划办与贵州日报社合作推出“文化贵州”专栏 2019-03-20
  • 就算不为了世界杯,俄罗斯也有那么多时髦好去处值得你飞去 2019-03-20