vue-03-1：vue获取修改值，方法传值以及时间对象

          vue-03-1：vue获取修改值，方法传值以及时间对象

参考博客：咸鱼最牛逼

地址：https://blog.csdn.net/panchang199266?utm_source=feed

一、获取/修改data定义数据

1、案例介绍：

<button @click="getInputValue">获取data里面的数据</button>
<button @click="setInputValue">设置data里面的数据</button>
<script>
    export default {     
      data () {  
        return {
          msg: 'hello vue',
          info:'hello java',
      },
      methods: {
        getInputValue() {
          alert(this.msg);
        },
        setInputValue() {
          this.info = 'hello js';
        }
      }
    }
</script>

二、vue方法传参

1、固定数据

<button @click="delData('nickname')">update data</button> 
<script>
    export default {     
      data () {
        return {
          message: 'hello vue'
      },
      methods: {
        delData(value) {
          alert(value);
        }
      }
    }
</script>

2、动态数据

// data自定义元素属性参数值，有以下两种方式
<button data-user-id='1' @click="getUid">get传参</button> 
<button :data-user-sex='0' @click="getSex">get传参</button> 
<script>
    export default {     
      data () {
        return {
          userId: 2,
          userSex:1,
      },
      methods: {
      	//必须得传递事件对象e
        getuid(e) {
          //data-user-id='1' id的首字母自动变大写
          alert(e.srcElement.dataset.userId);
        },
        getSex(e) {
          alert(e.srcElement.dataset.userSex);
        },
      }
    }
</script>

三、介绍下vue方法中的this和参数e

<button data-user-id='1314' @click="delteData">传参</button>

methods:{
	delteData(e){
	console.log(this);
	console.log(e);
		},
}

   打印this参数：

打印参数e：

截取了部分数据：

四、获取事件对象

<button @click="eventFunction($event)">获取事件对象</button> 
<script>
    export default {     
      data () {  
        return {
          msg: '你好vue'
      },
      methods: {
        eventFunction(e) {
        	//获取当前DOM节点
        	e.srcElement
        	//获取当前DOM节点的样式，并设置当前DOM样式
        	e.srcElement.style.background='red';
        }
      }
    }
</script>

总结：获取事件对象方法时进行参数传递有一个形参$event,如果不写这个形参在具体方法中也是可以获取到e下面的所有关联信息的。

五、方法之间的调用

在调用方法时直接通过this进行调用即可。