span元素設定title及$event使用

<span title="我這個屬性只要滑鼠停留在上面就會顯示出來">文字文字文字</span>

v-for配合使用title

<tr v-for="(items,index) in takedataArr" >
  <td>{{index+1}}月</td>
  <td v-for="(item,i) in items" :key="i" :style="item.bgcolor" v-html="item.aqi" @mouseover="getTdTitle(item,$event)"></td>
</tr>

這裡的takedataArr是一個雙重陣列，item是json字串，$event指向當前觸發的事件

getTdTitle(item,e){//繫結滑鼠移入操作 給td的title屬性賦值
  if(item != null && item != undefined && item != ''){
    let tdtitle = "城市："+item.cityname+"\n"
      +"最嚴重汙染物："+item.primarypol+"\n"+"綜合指數："+item.countindex+"\n"
      +"汙染等級："+item.aqilevel+"\n"+"pm10："+item.pm10+"\n"
      +"co："+item.co+"\n"+"no2："+item.no2+"\n"
      +"citycode："+item.citycode+"\n"+"pm25："+item.pm25+"\n"
      +"so2："+item.so2+"\n"+"aqi："+item.aqi+"\n"
      +"o3_8h："+item.o3_8h+"\n"+"資料時間："+item.datatime;
    /*let m = JSON.stringify(item);//需要轉換成string格式
    let arr = m.split(',');for(let i=0;i < arr.length;i++){tdtitle += arr[i]+"\n";};*/
    e.currentTarget.title = tdtitle;//給當前td的title賦值
  }
}

$event指向當前觸發的事件,呼叫需在元素觸發方法時傳入

<button @click = “clickfun($event)”>點選</button>
  
methods: {
clickfun(e) {
// e.target 是你當前點選的元素
// e.currentTarget 是你繫結事件的元素
    #獲得點選元素的前一個元素
    e.currentTarget.previousElementSibling.innerHTML
    #獲得點選元素的第一個子元素
    e.currentTarget.firstElementChild
    # 獲得點選元素的下一個元素
    e.currentTarget.nextElementSibling
    # 獲得點選元素中id為string的元素
    e.currentTarget.getElementById("string")
    # 獲得點選元素的string屬性
    e.currentTarget.getAttributeNode('string')
    # 獲得點選元素的父級元素
    e.currentTarget.parentElement
    # 獲得點選元素的前一個元素的第一個子元素的HTML值
    e.currentTarget.previousElementSibling.firstElementChild.innerHTML
  
    }
        },