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;">事件屬性中直接寫(xiě)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>事件屬性中調(diào)用methods中定義方法，并傳遞參數(shù)和$event</h1>
      參數(shù)a:<input type="number" v-model="num1" /><br />
      參數(shù)b:<input type="number" v-model="num2" /><br />
      計(jì)算結(jié)果：<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相應(yīng)值

      let countNum = eval(this.num1 + parameter + this.num2)  //eval() 函數(shù)計(jì)算
      console.log(countNum) //計(jì)算結(jié)果
      // this.result = this.num1 + parameter + this.num2 + "=" + countNum // parameter 通過(guò)傳參計(jì)算
      this.result = this.num1 + $event.srcElement.value + this.num2 + '=' + countNum // $event通過(guò)傳參獲取計(jì)算方式 計(jì)算

} } }; </script>