v-bind 与 v-model 的不同之处及 v-model 修饰符详述

前端基地

已于 2024-07-11 14:30:58 修改

阅读量868

点赞数 31

分类专栏： vue3.0第一季文章标签：前端 javascript vue.js 前端框架 html5 es6 css3

于 2024-06-24 08:52:36 首次发布

本文链接：https://blog.csdn.net/chinayun_6401/article/details/139912060

版权

v-bind

v-model和v-bind区别

v-model修饰符

v-bind

在 Vue 中，v-bind 主要承担着动态绑定元素属性这一关键作用。其中，“v-bind:href”能够简洁地写为“:href”。在 v-bind 中还能够书写合法的 JavaScript 表达式。通过 v-bind 能够成功地将数据与元素的各类属性紧密建立起关联，一旦数据出现变化，相应的属性值也会即刻进行实时更新。如此一来，便可以极为便捷地依据组件内部的数据状态来对元素的众多属性（诸如 class、style、src、href 等）实施动态控制，进而让视图具备更强的灵活性与动态性。

示例代码如下：

<body>  
    <div id="app">  
        <el-divider content-position="left">绑定变量到元素的属性</el-divider>  
        <el-space wrap>  
            <el-text v-bind:size="size" v-bind:type="type">Large-primary</el-text>  
            <!-- 简写 -->  
            <el-text :size="size" :type="type">Large-primary</el-text>  
            <!-- (3.4+)，扩展为 :size="size" :type="type"-->  
            <el-text :size :type>Large-primary</el-text>  
            <!-- 动态属性名 -->  
            <el-text :[key]="tag" :size :type>Large-primary</el-text>  
            <!-- 绑定对象形式的属性 -->  
            <el-text v-bind="{size,type:'success'}">Large-primary</el-text>  
        </el-space>  
        <el-divider content-position="left">绑定表达式到元素的属性</el-divider>  
        <el-text :size="flag===true?'small

最低0.47元/天解锁文章

前端基地

关注

31
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
v-bind 与 v-model 的不同之处及 v-model 修饰符详述

在 Vue 框架中，v-model 指令通常被应用于各类表单元素。借助这一指令，能够成功实现表单元素与 Model 中数据的双向绑定效果。具体而言，v-model 不仅能够将 Model（MVVM 架构中的 M）里的数据自动绑定至 View（MVVM 架构中的 V），使得视图得以准确呈现数据，而且还能够将 View 中的数据自动反馈并绑定到 Model（MVVM 架构中的 M），从而实现数据的双向交互。然而，v-bind 指令的主要作用是将 Model（MVVM 架构中的 M）中的数据自动绑定到 View
复制链接

扫一扫