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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
Javascript 继承实现例子
Aug 12 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
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 shell命令合并图片的代码
2011/06/23 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
python3 求约数的实例
2019/12/05 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
公司宣传语大全
2015/07/13 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书