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开发时的五个注意事项
Dec 08 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
详解JavaScript 的执行机制
Sep 18 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
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
php面向对象重点知识分享
2019/09/27 PHP
JavaScript 常用函数
2009/12/30 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
《赠汪伦》教学反思
2014/04/12 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
2015年大学生实习评语
2015/03/25 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
golang DNS服务器的简单实现操作
2021/04/30 Golang
JUnit5常用注解的使用
2021/07/02 Java/Android
Python 文字识别
2022/05/11 Python