方法寫在methods中

v-on:click='run()'

@click='run()'

方法獲取data中的數據通過this.數據獲取

方法設置data中的數據通過this.數據=’’設置

例如通過this.list=[1,2,3]，設置list的值，讓頁面出循環list

可通過 @click='run(’123’)'，將值傳到方法中

可通過 @click='run($event)'，將事件對象傳到方法中，然后根據事件對象的e.srcElement設置點擊標簽的屬性，也可以通過e.srcElement.dataset獲取自定義屬性

<template> <div id='app'> {{msg}} <button @click='run()'>@click事件觸發</button> <button v-on:click='runvon()'>v-on:click事件觸發</button> <button @click='getMsg()'>獲取data.msg</button> <button v-on:click='setMsg()'>設置data.msg</button> <ul> <li v-for='item in list'>{{item}}</li> </ul> <button @click='setList()'>設置List的值</button> <button @click='sendData(’123’)'>方法傳值</button> <button v-on:click='sendEvent($event)'>傳遞事件對象</button> <button @click='sendEventSet($event)'>傳遞事件對象，并設置背景色</button> <button data-a='啦啦啦' @click='sendEventData($event)'>傳遞事件對象，并獲取自定義屬性</button> </div></template><script>export default { name: ’app’, data () { return { msg: ’123’, list:[] } }, methods:{ run(){ alert('@click事件觸發') }, runvon(){ alert('v-on:click事件觸發') }, getMsg(){ alert('我獲取到了msg'+this.msg); }, setMsg(){ this.msg='我是設置后的值' }, setList(){ for(var i = 0 ; i < 10 ; i++){ this.list.push(i) } }, sendData(a){ alert('穿過來的值是：'+a) }, sendEvent(e){ console.log(e); }, sendEventSet(e){ e.srcElement.style.background='red'; }, sendEventData(e){ alert(e.srcElement.dataset.a) } }}</script><style lang='scss'></style>

補充知識：Vue 兄弟組件通過事件廣播傳遞數據

非父子組件傳值

通過事件廣播實現非父子組件傳值

1.新建js，引入并實例化Vue

import Vue from ’vue’var VueEvent = new Vue();export default VueEvent;

2.子組件A中引入VueEvent，并廣播事件

import VueEvent from ’../model/VueEvent.js’

VueEvent.$emit(’to-news’,this.msg);

3.子組件B中引入VueEvent，并監聽事件

import VueEvent from ’../model/VueEvent.js’

VueEvent.$on(’to-news’,data=>{console.log(data);});

示例代碼

import Vue from ’vue’var VueEvent = new Vue();export default VueEvent;

<template><div id='home'> <button @click='sendMsg()'>我來觸發事件</button></div></template><script>import VueEvent from '../models/VueEvent.js';export default { data() { return { msg: '我是Home的msg' }; }, methods: { sendMsg() { VueEvent.$emit('tonews', this.msg); } }};</script><style></style>

<template><div id='news'> 我來接受事件--{{msg}}</div></template><script>import VueEvent from '../models/VueEvent.js';export default { data() { return { msg: '我是News的msg' }; }, mounted() { VueEvent.$on('tonews', res => { this.msg = res; }); }};</script><style></style>

<template> <div id='app'> <v-home></v-home> <hr /> <v-news></v-news> </div></template><script>import Home from './components/Home.vue';import News from './components/News.vue';export default { name: 'app', data() { return { msg: 'Welcome to Your Vue.js App' }; }, components: { 'v-home': Home, 'v-news': News }};</script><style lang='scss'></style>

以上這篇Vue執行方法,方法獲取data值,設置data值,方法傳值操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。