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中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
关于vue-router路径计算问题
May 10 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
js实现简单的贪吃蛇游戏
Apr 23 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
mysq GBKl乱码
2006/11/28 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
深入koa-bodyparser原理解析
2019/01/16 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python正则中最短匹配实现代码
2018/01/16 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
什么是数据抽象
2016/11/26 面试题
专升本自我鉴定
2013/10/10 职场文书
采购内勤岗位职责
2013/12/10 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python