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

最新推荐文章于 2025-03-21 10:47:08 发布

秀秀的奇妙旅行

最新推荐文章于 2025-03-21 10:47:08 发布

阅读量2.8k

点赞数

分类专栏：前端学习记录文章标签： vue.js

本文链接：https://blog.csdn.net/yunxiu988622/article/details/120846247

版权

前端学习记录专栏收录该内容

29 篇文章

订阅专栏

@[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变量弱类型转换

有个小问题：步骤条要求接受一个值，而activeIndex绑定的是一个字符串，如何把字符串转换为数字？举个小例子，一看，就会明白了。
js中为什么说变量是弱类型和松散型？
javascript变量弱类型运算
符号“+”是字符串拼接,符号“-”的作用全都是"数字相减"