javascript - 使用vue.js要達到效果:點選li,取得目前點擊li的html值,參數this變成變成了window物件?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-06-14 10:54:14
0
4
991

要達到的效果:

  • 點選li,取得目前點選li的html值;

主要程式碼

<body>
<p id="page">
    <ul>
        <li v-on:click="aa(this)" v-for="item in items">{{item}}</li>
    </ul>
</p>
<script type="text/javascript">
new Vue({
  el: '#page',
  data: {
        items:[11,22,33,44]
  },
  methods:{
    aa:function(obj){
        console.log(obj);  //打印出来的是 window对象?
        alert(obj.html());   //找不到点击的值;
    }
  }
})
</script>
</body>

問題描述:

點擊li後傳遞的this印出來是window對象,而不是li這個對象,所以找不到對象;怎麼傳遞目前的li這個對像到js呢?

#
曾经蜡笔没有小新
曾经蜡笔没有小新

全部回覆(4)
小葫芦

看文件的時候看的仔細一點…不要臆想這些莫名其妙的用法。

內聯事件需要存取原始事件物件的時候,給裡面加上$event參數就行了。像這樣:

<li v-on:click="aa($event)" v-for="item in items">{{item}}</li>

你要拿到目前li標籤的對象,讀取事件對像下的currentTarget屬性就行了,即event.currentTarget

女神的闺蜜爱上我

雷雷 雷雷

左手右手慢动作

給li加個ref屬性 然後在methods中透過this.$refs拿到dom節點

typecho

檢定可行:

<li @click="aa($event)" v-for="item in items">{{item}}</li>
  methods:{
    aa:function(event){
        console.log(event.target.innerHTML);
    }
  }
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板