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 Accessor实现说明
Dec 06 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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生成UTF8文件的方法
2010/05/15 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
JS判定是否原生方法
2013/07/22 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
讲解Python中if语句的嵌套用法
2015/05/14 Python
详细分析python3的reduce函数
2017/12/05 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
python实现合并两个排序的链表
2019/03/03 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
高三自我鉴定
2013/10/23 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
实名检举信范文
2015/03/02 职场文书
元旦晚会开场白
2015/05/29 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android