Vue2+ElementUI学习笔记——v-on

个人学习笔记，我会一直完善，如果有错请评论区指教。

v-on实现各种事件触发

template

<template>
  <div class="about">
    <h1>这是v-on案例</h1>
    <p>v-on是事件触发</p>
    <p>click事件，点击触发</p>
    <el-button v-on:click="changeA">点击切换A的显示</el-button>
    <h1 v-if= this.showA>A</h1>
    <p>blur事件，输入后失去焦点触发，然后双向绑定数据(而v-model是实时的)</p>
    <el-input v-model="tempText" v-on:blur="handleInput" style="width: 200px" /><el-button @click="clear">清空</el-button>
    <p>双向绑定数据如下</p>
    <p>{{ text }}</p>
    <h1 v-bind:style="{ color: textColor } " v-on:mouseover="changeColor('red')" v-on:mouseout="changeColor('black')">mouse事件，悬停和移开触发</h1>
  </div>
</template>

script

<script>
export default { 
  data(){
    return {
      showA: false,
      tempText: '临时数据',
      text: '',
      textColor: 'black'
    }
  },
  methods:{
    changeA(){
      if (this.showA == false) {
        this.showA = true
      }else if (this.showA == true) {
        this.showA = false
      }
    },
    handleInput(){
        this.text = this.tempText
    },
    clear(){
        this.tempText = ''
        this.text = ''
    },
   changeColor(){
      if (this.textColor == 'black') {
        this.textColor = 'red'
      }else if (this.textColor == 'red') {
        this.textColor = 'black'
      }
    },
  }
}
</script>