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 相关文章推荐
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 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 mysql数据库操作类
2008/06/04 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
python学习之编写查询ip程序
2016/02/27 Python
分享vim python缩进等一些配置
2018/07/02 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
通过实例解析Python return运行原理
2020/03/04 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
Redis数据同步之redis shake的实现方法
2022/04/21 Redis