vue中绑定

最新推荐文章于 2024-05-17 14:32:46 发布

她说她一如既往的爱我

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量214

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_62980497/article/details/137447764

版权

在vue当中，要给元素绑定事件需要用到vue指令，指令一般以v-开头，例如绑定单击事件的指令是v-on:click = “函数名”，简写为@click = “函数名”

例如以下例子：单击button按钮，执行showInfo函数，弹出alert窗口。

点击button按钮

<body>
  <button class="btn" v-on:click = "showInfo">点击弹出{{name}}窗口</button>
  <script type="text/javascript">
     Vue.config.productionTip = false;
     const vm = new Vue({
      data:{
        name:"alert"
      },
      methods:{
        showInfo(){
          alert('hello!');
        }
      }
     })
     vm.$mount('.btn')
  </script>
</body>

vm.$mount(".btn")指定了可供vue操作的元素，与el关键字的作用类似，但比el更加灵活。

methods记录了所有的方法，凡事与vue所操作元素有关的方法都应该写在method里面，否则无效。

在button属性里面，使用v-on:click绑定了一个单击事件，当点击此对象时，就执行showInfo函数。

默认参数为event

<body>
  <button class="btn" v-on:click = "showInfo">点击弹出{{name}}窗口</button>
  <script type="text/javascript">
     Vue.config.productionTip = false;
     const vm = new Vue({
      data:{
        name:"alert"
      },
      methods:{
        showInfo(a,b,c){
          alert('hello!');
          console.log(a,b,c);
        }
      }
     })
     vm.$mount('.btn')
  </script>
</body>

她说她一如既往的爱我

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中绑定

在vue当中，要给元素绑定事件需要用到vue指令，指令一般以v-开头，例如绑定单击事件的指令是v-on:click = “函数名”，简写为@click = “函数名”在button属性里面，使用v-on:click绑定了一个单击事件，当点击此对象时，就执行showInfo函数。vm.$mount(".btn")指定了可供vue操作的元素，与el关键字的作用类似，但比el更加灵活。methods记录了所有的方法，凡事与vue所操作元素有关的方法都应该写在method里面，否则无效。默认参数为event。
复制链接

扫一扫