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中...

Angular baby

5023人浏览 · 2019-06-04 11:33:50

Angular baby · 2019-06-04 11:33:50 发布

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>

我们要注意的是，

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^