vue v-on 与 methods

版权声明:独学而无友,则孤陋寡闻。q群582951247 https://blog.csdn.net/mp624183768/article/details/87898763

普通我们使用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>

js

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

猜你喜欢

转载自blog.csdn.net/mp624183768/article/details/87898763