在自己创建的vue.js实例中,调用自己封装的JS方法

现在要点击a标签调用到JS的方法,到时由于是是使用vue.js语法,所以想要用到JS的方法首先要用到vue的实例。

而现在以下的代码的点击事件,是调用vue实例里面的方法。

<div class="right" id="right">
  <ul>
    <li v-for="item in items">
      <div v-for="ite in item.list">
        <div style="height:20px;">
          <a @click="vue_addToCart(ite.id)">点击调用方法</a>
        </div>
      </div>
    </li>
  </ul>
</div>

以下代码为vue的实例,而JS的方法,要在vue的实例里面的methods的方法里面去调用,也就是说上面调用的vue的方法要写在methods里面,而里面的那个方法,再去调用JS方法,才能够生效

<script type="text/javascript">
var right = new Vue({
  el: '#right',
  data: {
    items: {$newsidebarProds}
  },
  methods: {  
      vue_addToCart: function (id) { 
      console.log('id:',id); 
         addToCart(id);
      }  
  } 
});
</script>


以下代码为被调用的JS方法

<script type="text/javascript">
function addToCart(id){
  alert('调用成功');
}
</script>

现在点击一下a标签,就能触发了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值