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>

我们要注意的是，

<input v-model="message"> 等价于 <input v-bind:value="message" v-on:input="message = $event.target.value" />

Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue