Vue：v-on、v-bind、v-model用法

最新推荐文章于 2024-05-16 12:33:25 发布

Angular baby

最新推荐文章于 2024-05-16 12:33:25 发布

阅读量4.9k

点赞数 3

分类专栏：前端开发 Vue起步学习

本文链接：https://blog.csdn.net/qq_36451496/article/details/90765091

版权

前端开发同时被 2 个专栏收录

142 篇文章 3 订阅

订阅专栏

Vue起步学习

41 篇文章 5 订阅

订阅专栏

1、v-on：用于绑定HTML事件：

一般v-on:click 可以缩写为 @click，其中@代表v-on:

示例：例如我们在HTML的body中加入一个绑定了事件的button

<div id="app">
  <button v-on:click="onClick">点击这里</button>
</div>

在js的methods中加入一个onClick事件：

var app = new Vue({
el : '#app',
methods : {
  onClick : function(){
    console.log("clicked");
  }
}
})

也可以绑定多个事件，但是注意在用对象同时绑定多个事件时，不能用@代替v-on：

<button v-on='{mouseenter:onEnter,mouseleave:onOut}' v-on:click="onClick">点击这里</button>

上面我们通过对象的方式绑定多个事件，对象中的键是事件的名称值是methods中的成员属性方法：

methods : {
  onClick : function(){
    console.log("clicked");
  },
  onEnter : function(){
    console.log("mouseenter");
  },
  onOut : function(){
    console.log("mouseout");
  }
}

2、v-bind：用于设置HTML属性：

一般v-bind:href 缩写为 :href

例如：

<a v-bind:href="{{url}}">aa</a>

可以写成下面这种形式

<a :href="{{url}}">aa</a>

多标签的页面也可以使用is特性来切换不同的组件，例如：

<component v-bind:is="currentTabComponent"></component>

详细用法可以参考文档：https://www.cnblogs.com/liuchuanfeng/p/6742631.html

3、v-model：在表单控件元素上创建双向数据绑定：

所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。最基础的就是实现一个联动的效果：

<body>
    <div class="app">
        <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
        <label for="jack">jack</label>
        <input type="checkbox" id="John" value="John"  v-model="checkedNames">
        <label for="jack">John</label>
        <input type="checkbox" id="Mike" value="Mike"  v-model="checkedNames">
        <label for="jack">Mike</label>
        <br>
        <span>Checked names:{{checkedNames}}</span>
    </div>
    
</body>
<script>
   new Vue({
         el:'.app',
         data:{
             checkedNames:[]
         }
   })
</script>

我们要注意的是，

Angular baby

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Vue：v-on、v-bind、v-model用法

1、v-on：用于绑定HTML事件：一般v-on:click 可以缩写为 @click，其中@代表v-on:示例：例如我们在HTML的body中加入一个绑定了事件的button<div id="app"> <button v-on:click="onClick">点击这里</button></div>在js的methods中...
复制链接

扫一扫