Vue执行方法,方法获取data值,设置data值,方法传值操作


Posted in Javascript onAugust 05, 2020

方法写在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值,方法传值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 关于# 和 void的区别分析
Oct 26 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 #Javascript
js实现简单选项卡制作
Aug 05 #Javascript
vue 内联样式style中的background用法说明
Aug 05 #Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 #Javascript
微信小程序实现上传照片代码实例解析
Aug 04 #Javascript
JavaScript实现烟花绽放动画效果
Aug 04 #Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 #Javascript
You might like
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
php微信开发接入
2016/08/27 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
对python Tkinter Text的用法详解
2018/10/11 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python的re模块使用方法详解
2019/07/26 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
django rest framework serializers序列化实例
2020/05/13 Python
Keras自定义IOU方式
2020/06/10 Python
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
蟋蟀的住宅教学反思
2014/04/26 职场文书
爱国演讲稿400字
2014/05/07 职场文书
门面房租房协议书
2014/12/01 职场文书
社会实践活动总结格式
2015/05/11 职场文书
蜗居观后感
2015/06/11 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS