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 相关文章推荐
jQuery 浮动广告实现代码
Dec 25 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
js中的json对象详细介绍
Oct 29 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
angular directive的简单使用总结
May 24 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 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下将XML转换为数组
2010/01/01 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
20个最新的jQuery插件
2012/01/13 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
python基础教程之序列详解
2014/08/29 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
numba提升python运行速度的实例方法
2021/01/25 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
编辑找工作求职信范文
2013/12/16 职场文书
班组长岗位职责范本
2014/01/05 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
大一新生检讨书
2014/10/29 职场文书
委托公证书格式
2015/01/26 职场文书
运动会加油稿30字
2015/07/21 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
Python中的socket网络模块介绍
2022/07/23 Python