v-bind、v-on、v-model(Vue2)

作者: QYCD | 来源:发表于2023-05-18 23:42 被阅读0次

属性绑定:
v-bind: 简写:

事件绑定:
v-on: 简写@

双向绑定:
v-model: 简写 v-model

以van-field为例:

<van-field v-model="content" label="文本" placeholder="请输入内容" />
<div>这里是field输入的内容:{{content}}</div>

data() {
    return {
      content: 'Hello'
    }
  },

初始:

image.png

在输入框内继续输入内容，下方就会跟着改变:

image.png

基本指令
基本指令: 插值、v-bind、v-if、v-for、v-on、v-model
(Vue)组件：v-model深入使用&.sync修饰符&具名插
一、v-model深入使用 v-model 其实就是 v-bind: 和 v-on: 的语法糖。将自定义组件，绑定...
Vue (二)
Vue 八、重要指令 v-bind v-on v-model 九、案例 v-show v-for
Vue | v-model && form
和 v-on v-bind 等类似 v-model 也是 Vue 中常用的一种指令。 v-model 常常和表单配...
Vue——.sync修饰符 & 具名插槽 & 作用域插槽 & m
一、深入理解v-model v-model 其实就是 v-bind: 和 v-on: 的语法糖。将自定义组件，绑定...
vue 学习之数据双向绑定
表单输入绑定不用v-model的情况下实现双向绑定（v-on、v-bind） v-bind 将数据绑定到DOM节...
VUE命令
VUE主要包括（v-for,v-on,v-model,v-show,v-bind等） 1.v-model:双向绑定...
第一天--vuejs的学习
vue的模版语法：模块渲染声明式渲染；v-bind; v-model; v-on; v-if; v-for; v...
随记
v-model:双向数据绑定用于表单元素 @ 代替 v-on：事件名="函数名" : 代替 v-bind:属性名...
事件
v-model:="" 双向数据交互，多用于表单 v-on:事件="函数名" 点击图片能够切换图片v-bind 用...