vue v-on 与 methods

54 阅读 0 评论 36 点赞

我是靠谱客的博主沉静咖啡豆，最近开发中收集的这篇文章主要介绍vue v-on 与 methods，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

普通我们使用js

document.querySelector('#title').onclick=function(){
  alert('1234');
}

封装成方法的话

funciton myFa(Father){

alert(father);

}

vue 如何写呢

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
 

  <title>JS Bin</title>
</head>
<body>
<div class="app">
  {{message}}
  <ul>
    <li v-for="color in colors">
      {{color}}
    </li>
  </ul>
  
  <ul>
    <li v-for="item in home" v-on:click="myFa(item.father)">
      {{item.father}}
    </li>
  </ul>

</div>
       <script src="https://unpkg.com/vue"></script>
</body>

var app=new Vue({
    el:'.app',
    data:{
      message:'hello',
      colors:['black','red','blue'],
      home:[{father:'tom'},{father:'bob'}],
  },
  methods:{
    myFa:function(father){
      alert('我的爸爸是'+father)
    }
  }
  
  
});

官方文档

https://cn.vuejs.org/v2/api/#v-on