vue-7 表单双向绑/单向绑定 事件属性

<template>
  <div>
    <div>
      <h1>单向绑定&双向绑定</h1>
      单向绑定:<input type="text" :value="str_c" /><input type="button" value="查看单向绑定的值" @click="showStr_c" /><br/>
      双向绑定:<input type="text" v-model="str_m" /><input type="button" value="查看单向绑定的值" @click="showStr_m" /><br />
      
    </div>
    <div>
      <h1 style="color:blue;font-size: 22px;">事件属性中直接写JS代码:<input type="number" v-model="index" /></h1>
      <input type="button" value="累加" @click="index++" />
      <input type="button" value="递减" @click="index--" />
      <input type="button" value="重置" @click="clear()" />
    </div>
    <div>
      <h1>事件属性中调用methods中定义方法，并传递参数和$event</h1>
      参数a:<input type="number" v-model="num1" /><br />
      参数b:<input type="number" v-model="num2" /><br />
      计算结果：<span>{{result}}</span><br />
      <input type="button" value="+" id=plus @click="count('+',$event)" />
      <input type="button" value="-" id=subtract @click="count('-',$event)" />
      <input type="button" value="*" id=multiply @click="count('*',$event)" />
      <input type="button" value="/" id=divide @click="count('/',$event)" />
    </div>
  </div>
</template>

<script>
export default {
  name: "eventParameter",
  data() {
    return {
      str_c:"单向绑定",
      str_m:"双向绑定",
      index: 0,
      num1: 0,
      num2: 0,
      result: "0"
    };
  },
  methods: {
    showStr_c(){
      alert(this.str_c)
    },
    showStr_m() {
      alert(this.str_m)
    },
    clear() {
      this.index = 0;
    },
    count(parameter, $event) {

      console.log($event.srcElement.id + " " + $event.srcElement.value   //输出$event相应值

      let countNum = eval(this.num1 + parameter + this.num2)  //eval() 函数计算
      console.log(countNum) //计算结果
      // this.result = this.num1 + parameter + this.num2 + "=" + countNum // parameter 通过传参计算
      this.result = this.num1 + $event.srcElement.value + this.num2 + '=' + countNum // $event通过传参获取计算方式 计算

} } }; </script>