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 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
简单实现js页面切换功能
Jan 10 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 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数据库基础教程
2014/09/29 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
详解python算法之冒泡排序
2019/03/05 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
医学生实习自我鉴定
2013/09/27 职场文书
家长对老师的感言
2014/03/11 职场文书
交通处罚决定书
2015/06/24 职场文书
公司开业致辞
2015/07/29 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis