vue 定义方法执行方法获取数据改变数据执行方法传值以及事件对象

本文转载自查看原文 2018-11-23 17:24 925 vue

  1 <template>
  2 
  3 
  4   <div id="app">  
  5     
  6 <!-- 
  7       <img v-bind:src='url' />
  8 
  9       <img :src='url' /> -->
 10 
 11       {{msg}}
 12     <br>
 13     <br>
 14     <br>
 15 
 16 
 17       <button v-on:click="run1()">执行方法的第一种写法</button>
 18       <br><br><br>
 19 
 20       <button @click="run2()">执行方法的第二种写法</button>
 21 
 22       <br>
 23       <br>
 24       <br>
 25      
 26       <button @click="getMsg()">获取data里面的msg</button>
 27 
 28 
 29       <br>
 30       <br>
 31       <br>
 32       
 33       <button @click="setMsg()">改变data里面的msg</button>
 34 
 35 
 36       <br>
 37       <br>
 38       <br>
 39       
 40       <button @click="requestData()">请求数据</button>
 41 
 42       <hr>
 43 
 44       <ul>
 45 
 46         <li v-for="(item,key) in list">
 47           {{key}}---   {{item}}
 48         </li>
 49       </ul>
 50 
 51       <br>
 52       <br>
 53       <br>
 54       <button @click="deleteData('111')">执行方法传值111</button>
 55 
 56       <br>
 57       <br>
 58       <button @click="deleteData('222')">执行方法传值2222</button>
 59       <br>
 60       <br>
 61       <br>
 62       <button data-aid='123' @click="eventFn($event)">事件对象</button>      
 63 
 64   </div>
 65 </template>
 66 
 67 <script>
 68 
 69 
 70 
 71     export default {     
 72       data () { 
 73         return {
 74           msg: '你好vue',
 75           list:[]      
 76         }
 77       },
 78       methods:{
 79 
 80         run1:function(){
 81 
 82           alert('这是一个方法');
 83 
 84         },
 85 
 86         run2(){
 87           alert('这是另一个方法');
 88         },
 89         getMsg(){
 90             alert(this.msg);
 91         },
 92         setMsg(){
 93 
 94           this.msg="我是改变后的数据"
 95         },
 96         requestData(){
 97 
 98             for(var i=0;i<10;i++){
 99 
100               this.list.push('我是第'+i+'条数据');
101             }
102         }
103         ,
104         deleteData(val){
105 
106             alert(val);
107         },
108         eventFn(e){
109           console.log(e);
110 
111           // e.srcElement  dom节点
112 
113 
114 
115           e.srcElement.style.background='red';
116 
117 
118           console.log(e.srcElement.dataset.aid);  /*获取自定义属性的值*/
119         }
120 
121       }
122 
123     }
124 </script>
125 
126 
127 <style lang="scss">
128 
129 
130 
131 </style>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Vue事件定义方法执行方法获取数据改变数据执行方法传值以及事件对象 vue.js--基础事件定义，获取数据，执行方法传值 vue在多方法执行完后再执行另一个方法（等待请求完数据再执行） vue 改变数据DOM不更新，获取不到DOM的解决方法 vue自定义方法执行顺序 vue循环里添加点击事件，方法执行来两次 vue定义自定义事件方法、事件传值及事件对象 angularjs 初始化方法执行两次以及url定义错误导致传值错误问题 Vue页面刷新方法(子组件改变数据后兄弟组件刷新，不闪烁) Vue执行方法，方法获取data值，设置data值，方法传值

vue 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象

免责声明！

vue 定义方法执行方法获取数据改变数据执行方法传值以及事件对象