Vue：v-on、v-bind、v-model、@click、：model用法以及区别（附代码实例）

最新推荐文章于 2024-06-26 07:05:28 发布
最新推荐文章于 2024-06-26 07:05:28 发布
阅读量2.4k 收藏 9
点赞数
分类专栏： 前端学习记录 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunxiu988622/article/details/120846247
版权

@[TOC](

1、v-on(@)

在这里插入图片描述
在这里插入图片描述

2、v-bind ( : )

在这里插入图片描述

3、v- model = v-on+v- bind

在这里插入图片描述
我们要注意的是，

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

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

① 区别

v-bind和v-model的区别
v-model和:model的区别

  • v-bind= : (属性名) 应用于属性，单向绑定，不存在view向model传值的操作
    view向model传值包括——表单直接输入，点击tab栏区域选择显示的tab页面的时候，点击级联框选择的时候（总之就是用户向后台”输入“信息的时候）
  • v-model：应用于表单之类的，双向绑定，view可以从model取值，也可以把输入到view的值 放到model里面
  • :model相当于v-bind:model的缩写—— 对model属性 绑定对应的data
    1、这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。
    在这里插入图片描述
  • ：实现一个动态绑定的作用，如果一个数值是会变化的，就加上：，比如下边这个例子，如果不加：就是titletext，如果加上的话就是 titleText 的值 ”动态参数“
 <el-form-item :label='titleText' prop="attr_name">

② v-model 和 :model 在element-ui中表单中的应用

意思是：这个表单el-form里面有很多form-item（input输入）

  • el-form的值（包含 表单的所有内容）都是归属于一个model属性，跟ruleForm单向绑定
  • 但是input里面的值就是，需要v-model双向绑定了

在这里插入图片描述

4、应用

① v-model 和 :model 在element-ui中tab栏中的应用

在这里插入图片描述

背景：有一个tab栏，想把每一个tab选项，当点击它的时候，触发data中activeIndex的值的变化 这是element-ui中给出的示例用法，但是可以通过这个固定用法理解这几个函数的作用

  • tab点击切换页面，有数据的双向交流，所以就需要用v-model了
  • 例如下边的这个data中定义了activeIndex， tab栏v-model和name的作用：当点击第一个基本信息的时候 把name=0的这个name值赋值给activeIndex
    在这里插入图片描述
    在这里插入图片描述

② tab栏与步骤条的动态联动效果

在这里插入图片描述

  • 数据流向： 即用户输入（点击第一个tab栏，有点像在表单中输入）——> 输入的name值被 tab栏v-model绑定到data中（反向绑定）——>由于data中的activeIndex的值发生变化，步骤条由于：active 单向绑定进行了切换（正向绑定）
  • ps： tab栏v-model和name的作用：当点击第一个基本信息的时候 把name=0的这个name值赋值给activeIndex
var str = 5332355';
var x = str - 0;
x = x * 1;
tab栏v-model双向绑定到data

在这里插入图片描述
在这里插入图片描述

步骤条单项绑定data

只需要把active属性绑定到 data中即可（没有输入，只有data影响步骤条这一个问题）

在这里插入图片描述

利用js变量弱类型转换

秀秀的奇妙旅行
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
@click 和 v-on:click 的区别
YHLSunshine的博客
03-18 1207
`@click 和 v-on:click 的含义 与 两者之间的区别
vue中的v-bind、v-on和v-model
Anlantic的博客
10-20 805
vue.js的v-bind、v-on、v-model
Vue中v-bind、v-model、v-on、循环v-for、判断v-if、v-else、v-show、v-text、v-html、v-pre、v-once非常详细包你学会
最新发布
爱吃Java的羊的博客
06-26 689
v-bindVue中v-bind、v-on、v-model、循环v-for、判断v-if、v-else、v-show、v-text、v-html、v-pre、v-once非常详细包你学会v-bind。
vue中的事件v-on和@
qq_41846616的博客
03-22 3678
vue中事件可以使用@ 或者v-on 例如： <button class="submission" @click="sendcode">确定</button> 或者： <button class="submission" v-on:click="sendcode">确定</button> 在methods中可以打印下事件触发没 例如 method...
Vue中 v-on v-bind和 v-model
weixin_43254676的博客
07-26 857
v-on v-on用于事件绑定，缩写@ < button v-on:click=“handleClick”>提交</ button> < button @click=“handleClick”>提交</ button> v-bind v-bind用于属性绑定，缩写 ： 如例： < img v-bind:src=“imgUrl”/> &lt...
vue指令（v-bind、v-on、v-model）
qq_59185329的博客
09-20 301
vue指令
Vue：v-on、v-bind、v-model用法
灿灿大王搭建的黄金屋
06-04 4975
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中...
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
在Vue.js开发过程中，我们经常会遇到在`v-for`循环中使用`v-if`或`v-bind:class`（简写为`:class`）时遇到一些失效的问题。这主要是由于Vue的渲染机制导致的，理解这个问题的关键在于理解Vue的响应式系统和虚拟DOM的...
详解vue中v-model和v-bind绑定数据的异同
01-21
vue的模板采用DOM模板，也就是说它的模板可以当做DOM节点运行，在浏览器下不报错，绑定数据有三种方式，一种是插值，也就是{{name}}的形式，一种是v-bind，还有一种是v-model。{{name}}的形式比较好理解，就是以文本...
vue.js使用v-model实现父子组件间的双向通信示例
10-15
`v-model`主要用于表单元素，如输入框、选择器等，它将元素的值与Vue实例的数据属性绑定在一起，当用户交互改变表单元素的值时，Vue实例的数据也会相应更新，反之亦然。 在父子组件通信中，`v-model`扮演的角色有所...
vue使用v-for实现hover点击效果
10-17
在Vue.js中，我们可以利用其强大的数据绑定和事件处理能力来实现复杂的功能，比如在使用`v-for`循环遍历列表时，同时实现鼠标悬停（hover）和点击效果。`v-for`指令用于渲染列表或数组，而`v-on`指令（通常简写为`@`...
vue- 基础使用 ，v-for、v-bind、v-if/v-else、v-show、v-model、.v-on
03-08
在Vue中，有几个核心指令用于构建动态用户界面，这些指令包括`v-for`、`v-bind`、`v-if/v-else`、`v-show`、`v-model`和`.v-on`。下面将详细介绍这些指令的使用方法和场景。 1. `v-for`: 这个指令用于在DOM元素上...
Vue中v-bind,v-on,v-model辨析
weixin_50736511的博客
12-09 223
v-bind:属性绑定(语法糖 : ) v-on:事件绑定(语法糖@), v-model:双向绑定(语法糖v-model 通常v-on用于时间时间绑定，比如给按钮绑定事件 v-on:click (@click) v-bind 当数据要绑定变量时 当一个后面应该是“” 字符串时，你要绑定一个data里的变量时需要加上v-bind <p class="font_Size" v-bind:class="{ red: isRed, center: isCenter }">Hello World!<
vue(二)之v-model,v-on,数组中的响应式方法
weixin_42968500的博客
02-01 256
v-on v-on的参数传递 v-on的修饰符的使用
v-bind和v-on
weixin_30586257的博客
02-14 948
v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href <a :href="{{url}}">aa</a> v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click <a @click="get()">aa</a> 最好不要用@，因为asp.net mvc页面识别@ 不太好 ...
@click与v-model的区别，model是双向绑定
weixin_40945354的博客
03-29 272
我写的错误的代码 <!DOCTYPE html> <html> <head> <div> <title>如如</title> <input @click = "HelloWorld" type="text" /> </div> </head> <body> <script> export default {
VUE2 事件处理 —— v-on或@
DTCloud
04-12 1387
click事件 两种写法：v-on 或 @ <button v-on:click="dianwo1">点我</button> <button @click="dianwo2">点我</button> <!-- 传参 --> <button @click="dianwo3($event, 66)">点我</button> methods:{ dianwo1(event){ alert('我被点了')
vue练习 v-model @click v-for
前端大菜鸟
01-27 294
使用 v-model @click v-for编写了简单的发布功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script> <title></title> <style>
v-on v-bind v-model的区别
09-02
在Vue.js中，v-on、v-bind和v-model是三个不同的指令。 v-on是Vue.js的事件指令，用于监听DOM事件并触发相应的方法。它可以用于绑定事件处理器，比如点击事件、鼠标移入移出事件等。通过使用v-on指令，我们可以在模板中绑定事件，并在触发事件时执行相应的方法。 v-bind是Vue.js的属性绑定指令，用于将数据绑定到HTML元素的属性上。通过使用v-bind，我们可以将Vue实例中的数据动态地绑定到HTML元素的属性上，从而实现数据的动态更新。 v-model是Vue.js的双向绑定指令，用于在表单元素和Vue实例中的数据之间建立双向绑定关系。它可以实现表单元素的数据绑定和同步，使得数据的变化能够自动反映到表单元素中，同时，用户在表单元素中输入的数据也能够实时地同步到Vue实例中。 综上所述，v-on是用于绑定事件的指令，v-bind是用于绑定属性的指令，而v-model是用于实现双向绑定的指令。它们各自有不同的用途和功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法)?自制动图,一看就懂 ∠( °ω°)／ 前端知识](https://blog.csdn.net/qq_39611230/article/details/106854178)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [自学Vue必看的v-model知识总结(超详细)](https://download.csdn.net/download/weixin_38590456/14045058)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值