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 相关文章推荐
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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开发文档 会员收费1期
2012/08/14 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
mongodb和php的用法详解
2019/03/25 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
浅析javascript的return语句
2015/12/15 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
vue实现自定义多选按钮
2020/07/16 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
python删除服务器文件代码示例
2018/02/09 Python
python自动化生成IOS的图标
2018/11/13 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
python 高阶函数简单介绍
2021/02/19 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
电子商务专业推荐信范文
2013/12/02 职场文书
医院总经理职责
2013/12/26 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
最感人的道歉情书
2015/05/12 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书