Vue执行方法,方法获取data值,设置data值,方法传值
方法写在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: '',
list:[]
}
},
methods:{
run(){
alert("@click事件触发")
},
runvon(){
alert("v-on:click事件触发")
},
getMsg(){
alert("我获取到了msg"+this.msg);
},
setMsg(){
this.msg="我是设置后的值"
},
setList(){
for(var i = ; i < ; 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执行方法,方法获取data值,设置data值,方法传值的更多相关文章
- Vue父组件主动获取子组件的数据和方法
Vue父组件主动获取子组件的数据和方法 https://www.jianshu.com/p/bf88fc809131
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
- jquery获取表单数据方法$.serializeArray()获取不到disabled的值
$.serializeArray()获取不到disabled的值 经实验,$.serializeArray()获取不到disabled的值,如果想要让input元素变为不可用,可以把input设为re ...
- vue在使用ajax获取数据时,两种方法(jquery和vue_resource)
@{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport ...
- c#运用反射获取属性和设置属性值
/// <summary> /// 获取类中的属性值 /// </summary> /// <param name="FieldName">&l ...
- vue prop不同数据类型(数组,对象..)设置默认值
vue prop 会接收不同的数据类型,这里列出了 常用的数据类型的设置默认值的写法,其中包含: Number, String, Boolean, Array, Function, Object ...
- layer父界面调用子弹窗的方法和获取子弹窗的元素值总结
layer.open({ type: 2 ,title: false //不显示标题栏 ,closeBtn: false ,area: ['460px', '45%'] ,shade: 0.5 ,id ...
- springdata 使用plql更新时候注意点 ?2 表示从方法中获取第二个形参的值 ?1表示从方法中获取第一个值
1.query表示的是查询 需要在操作update的方法上再次添加一个注解modifying 2.plql不是springdatajpa自带的sql功能自带的功能 自动有事务: 所以需要我们手动在se ...
- PHP无法获取.env文件设置的值
EGPCS指代的是什么? 指的是可以从服务器配置和请求的信息中获取的信息,它包括了environment(环境).GET.POST.cookie.server,对应的全局数组:$_ENV.$_ ...
- winform中dataGridView单元格根据值设置新值,彻底解决绑定后数据类型转换的困难
// winform中dataGridView单元格在数据绑定后,数据类型更改困难,只能迂回实现.有时候需要将数字变换为不同的文字描述,就会出现int32到string类型转换的异常,借助CellFo ...
随机推荐
- Nginx配置负载均衡服务器
最近想买一台二手电脑当Linux服务器,一直没有买,暂时用windows来搞. Nginx下载地址:http://nginx.org/download/nginx-1.2.6.zip Tomcat下载 ...
- Python 算法之冒泡排序
冒泡排序 冒泡排序算法的原理如下:(从后往前) 1.比较相邻的元素.如果第一个比第二个大,就交换他们两个. 2.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是 ...
- 通过Python查看Azure VM的状态
Azure的管理平台采用Restful API的方式实现管理.比如获取VM的管理API的各种操作的文档请参考: https://docs.microsoft.com/en-us/rest/api/co ...
- DB字段顺序与类的属性顺序一致:{Oracle.DataAccess.Client.OracleException ORA-00932: 数据类型不一致: 应为 TIMESTAMP, 但却获得 NUMBER
{Oracle.DataAccess.Client.OracleException ORA-00932: 数据类型不一致: 应为 TIMESTAMP, 但却获得 NUMBER 应用程序中类型T ...
- java基础练习。。replaceall
总结:方法不是别人告诉你的.再与你的手 package com.bc; public class gdfk { public static void main(String[] args) { Str ...
- pushd命令
1)功能pushd命令常用于将目录加入到栈中,加入记录到目录栈顶部,并切换到该目录:若pushd命令不加任何参数,则会将位于记录栈最上面的2个目录对换位置 2)语法(1)格式:pushd [目录 | ...
- SpringBoot JPA 中无法注入 JpaRepository 接口的问题及解决方案
错误: 在Springboot 框架中使用JPA的过程中,怎么来实现数据库操作底层的交互呢?Spring JPA其实已经提供了一套很全面的解决方案,实现对数据库的增.删.查.改只需要继承JPA实现类 ...
- 2015.5.9 C#编写DLL及C#调用C#DLL
过程比C#调用VC++dll简单. 一.创建DLL 新建工程,类型选择类库,生成的结果就是dll 注意:在项目属性-应用程序中,注意三个地方,程序集名称和默认命名空间可以调整,但要一致,别的程序调用此 ...
- jdbcTemplate学习(四)
前面三节讲了jdbcTemplate的使用,这一节讲解NamedParameterJdbcTemplate的使用方法: NamedParameterJdbcTemplate类是基于JdbcTempla ...
- DAY8-python异常处理
一.什么是异常 异常就是程序运行时发生错误的信号(在程序出现错误时,则会产生一个异常,若程序没有处理它,则会抛出该异常,程序的运行也随之终止),在python中,错误触发的异常如下 而错误分两种 #语 ...