方法写在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值,方法传值的更多相关文章

  1. Vue父组件主动获取子组件的数据和方法

    Vue父组件主动获取子组件的数据和方法 https://www.jianshu.com/p/bf88fc809131

  2. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  3. jquery获取表单数据方法$.serializeArray()获取不到disabled的值

    $.serializeArray()获取不到disabled的值 经实验,$.serializeArray()获取不到disabled的值,如果想要让input元素变为不可用,可以把input设为re ...

  4. vue在使用ajax获取数据时,两种方法(jquery和vue_resource)

    @{    Layout = null;} <!DOCTYPE html> <html><head>    <meta name="viewport ...

  5. c#运用反射获取属性和设置属性值

    /// <summary> /// 获取类中的属性值 /// </summary> /// <param name="FieldName">&l ...

  6. vue prop不同数据类型(数组,对象..)设置默认值

    vue prop 会接收不同的数据类型,这里列出了 常用的数据类型的设置默认值的写法,其中包含: Number, String, Boolean, Array,  Function, Object   ...

  7. layer父界面调用子弹窗的方法和获取子弹窗的元素值总结

    layer.open({ type: 2 ,title: false //不显示标题栏 ,closeBtn: false ,area: ['460px', '45%'] ,shade: 0.5 ,id ...

  8. springdata 使用plql更新时候注意点 ?2 表示从方法中获取第二个形参的值 ?1表示从方法中获取第一个值

    1.query表示的是查询 需要在操作update的方法上再次添加一个注解modifying 2.plql不是springdatajpa自带的sql功能自带的功能 自动有事务: 所以需要我们手动在se ...

  9. PHP无法获取.env文件设置的值

    EGPCS指代的是什么?     指的是可以从服务器配置和请求的信息中获取的信息,它包括了environment(环境).GET.POST.cookie.server,对应的全局数组:$_ENV.$_ ...

  10. winform中dataGridView单元格根据值设置新值,彻底解决绑定后数据类型转换的困难

    // winform中dataGridView单元格在数据绑定后,数据类型更改困难,只能迂回实现.有时候需要将数字变换为不同的文字描述,就会出现int32到string类型转换的异常,借助CellFo ...

随机推荐

  1. Nginx配置负载均衡服务器

    最近想买一台二手电脑当Linux服务器,一直没有买,暂时用windows来搞. Nginx下载地址:http://nginx.org/download/nginx-1.2.6.zip Tomcat下载 ...

  2. Python 算法之冒泡排序

    冒泡排序 冒泡排序算法的原理如下:(从后往前) 1.比较相邻的元素.如果第一个比第二个大,就交换他们两个. 2.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是 ...

  3. 通过Python查看Azure VM的状态

    Azure的管理平台采用Restful API的方式实现管理.比如获取VM的管理API的各种操作的文档请参考: https://docs.microsoft.com/en-us/rest/api/co ...

  4. DB字段顺序与类的属性顺序一致:{Oracle.DataAccess.Client.OracleException ORA-00932: 数据类型不一致: 应为 TIMESTAMP, 但却获得 NUMBER

    {Oracle.DataAccess.Client.OracleException ORA-00932: 数据类型不一致: 应为 TIMESTAMP, 但却获得 NUMBER     应用程序中类型T ...

  5. java基础练习。。replaceall

    总结:方法不是别人告诉你的.再与你的手 package com.bc; public class gdfk { public static void main(String[] args) { Str ...

  6. pushd命令

    1)功能pushd命令常用于将目录加入到栈中,加入记录到目录栈顶部,并切换到该目录:若pushd命令不加任何参数,则会将位于记录栈最上面的2个目录对换位置 2)语法(1)格式:pushd  [目录 | ...

  7. SpringBoot JPA 中无法注入 JpaRepository 接口的问题及解决方案

    错误: 在Springboot  框架中使用JPA的过程中,怎么来实现数据库操作底层的交互呢?Spring JPA其实已经提供了一套很全面的解决方案,实现对数据库的增.删.查.改只需要继承JPA实现类 ...

  8. 2015.5.9 C#编写DLL及C#调用C#DLL

    过程比C#调用VC++dll简单. 一.创建DLL 新建工程,类型选择类库,生成的结果就是dll 注意:在项目属性-应用程序中,注意三个地方,程序集名称和默认命名空间可以调整,但要一致,别的程序调用此 ...

  9. jdbcTemplate学习(四)

    前面三节讲了jdbcTemplate的使用,这一节讲解NamedParameterJdbcTemplate的使用方法: NamedParameterJdbcTemplate类是基于JdbcTempla ...

  10. DAY8-python异常处理

    一.什么是异常 异常就是程序运行时发生错误的信号(在程序出现错误时,则会产生一个异常,若程序没有处理它,则会抛出该异常,程序的运行也随之终止),在python中,错误触发的异常如下 而错误分两种 #语 ...