v-bind详解与常见用法

最新推荐文章于 2024-09-18 08:44:09 发布
最新推荐文章于 2024-09-18 08:44:09 发布
阅读量9k 收藏 18
点赞数 8
分类专栏： 你不知道的JavaScript 文章标签： vue.js javascript 前端 vue 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63005501/article/details/128002116
版权

我的感悟

你真的了解v-bind吗，它的api其实挺多的，如果你没有仔细看完官网，恐怕只知道v-bind是用来绑定值可变的属性。如果不愿意看官网的小伙伴或者是觉得官网晦涩难懂，可以我这篇文章，你会熟悉更多关于v-bind的使用。如有错误，欢迎大家批评指正

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

我的感悟

你真的了解v-bind吗，它的api其实挺多的，如果你没有仔细看完官网，恐怕只知道v-bind是用来绑定值可变的属性。如果不愿意看官网的小伙伴或者是觉得官网晦涩难懂，可以我这篇文章，你会熟悉更多关于v-bind的使用。如有错误，欢迎大家批评指正

提示：以下是本篇文章正文内容，下面案例可供参考

一、v-bind是什么？

简单来说：v-bind就是用于绑定数据和元素属性的

二、详细用法总结

 1.v-bind介绍      

         作用: 动态绑定属性
         语法:       v-bind: 属性名 = "数据名"
         缩写(也叫语法糖):       : 属性名 = "数据名"

 2..v-bind动态绑定class(对象方法)

        语法如下（示例）：

         v-bind: class = { 类名1: 布尔值, 类名n......}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.active{
			color: red;
		}
	</style>
</head>
<body>
	<div class="app">
		<h1 :class="{active: isActive, line: isLine}">{{message}}</h1>
	</div>
    //所引用的Vue文件
	<script src="../vue.js"></script>
	<script>
		const app = new Vue({
			el: '.app',
			data: {
				
				message: '你好Vue!',
				isActive: true,
				isLine: true
			},
		})
	</script>
</body>
</html>

 3.v-bind动态绑定class(数组语法)

         语法:

          v-bind: class = [ 数组名1, 数组名n......

<div id="app">
		<h1 :class="[active, lineL]">{{message}}</h1>
	</div>
	<script src="../vue.js"></script>
	<script>
		const app = new Vue({
			el:'#app',
			data: {
				message: '你好Vue!',
				active: 'a',
				lineL: 'b'
			},
		})
	</script>

  4.v-bind动态绑定style(对象语法)

        : style = { 属性名: 属性值, ....}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.active{
			color: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<h1 :style="{fontSize: finalSize + 'px', background: finalColor}">{{message}}</h1>
	</div>
	<script src="../vue.js"></script>
	<script>
		const app = new Vue({
			el:'#app',
			data: {
				message: '你好Vue!',
				finalSize: 100,
				finalColor: 'red',
			},
		})
	</script>
</body>
</html>

 5.v-bind动态绑定style(数组语法)

          : style = [ 数组名1, 数组名2 ....]

<div id="app">
		<h1 :style="[style1, style2]">{{message}}</h1>
		<!-- <h1 :style="getStyles()">{{message}}</h1> -->
	</div>
	<script src="../vue.js"></script>
	<script>
		const app = new Vue({
			el:'#app',
			data: {
				message: '你好Vue!',
				finalSize: 100,
				finalColor: 'red',
				style1: {background: 'red'},
				style2: {color: 'white'}
			},
		})
	</script>

三、v-bind指令的一些注意事项

<h1 :style="font-size:50px;color:red;">this is test</h1>

    这是错误的，因为vue会把font-size当成一个data数据！不能在属性值内直接写入以下语法

<h1 :style="'font-size:50px;color:red;'">this is test</h1>

   可以看到只需要在总的样式前后各加上一个 ’ 单引号即可！这样他就会把他当作字符串了，不过     如果我们这么加样式就没有必要写v-bind了…

  四、我在项目中的应用，结合vue（动态绑定属性）

 <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="单号" prop="gdglId">
                <el-input v-model="form.gdglId" placeholder="请输入单号" v-bind:disabled="disabledData" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="委托部门" prop="deptName">
                <el-input v-model="form.deptName" placeholder="请输入委托部门" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="接单人" prop="projectReceivedBy">
                <el-input v-model="form.projectReceivedBy" placeholder="请输入接单人" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="开始时间" prop="startDatetime">
                <el-date-picker clearable
                  v-model="form.startDatetime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择开始时间">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="结束时间" prop="endDatetime">
                <el-date-picker clearable
                  v-model="form.endDatetime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择结束时间">
                </el-date-picker>
              </el-form-item>
            </div>
  data() {
    return {
      // 单号是否禁用
      disabledData:true,
      // 班组人员信息展示

  通过true和false动态改变属性值的变化，适用于属性值为true和false

总结

总体来说v-bind这个指令就是这么个回事了！在实际中多多练习就可以啦

爱前端的小松鼠
关注
专栏目录
v-bind绑定
qq_61541602的博客
04-23 2116
在Vue中v-bind用于绑定一个或多个属性值，或者向另一个组件传递Props值。 1.v-bind介绍 作用: 动态绑定属性 语法: v-bind: 属性名 = "数据名" 缩写(也叫语法糖): : 属性名 = "数据名" 2.v-bind动态绑定class(对象方法) 语法: v-bind: class= { 类名1: 布尔值, 类名n......} 例: <!DOCTYPE html> <html lang="en"> <hea...
v-bind使用
yangsm的博客
06-21 1万+
一、v-bind基本使用 有时候属性也不是写死的，也是需要根据某些变量某些数据动态来决定的。 比如动态绑定a元素的href属性 比如动态绑定img元素的src属性 比如动态绑定一些类、样式 这个时候，我们可以使用v-bind指令。 v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值 <div id="app"> <!-- 不能使用mustache语法 把imgURL直接当成字符串 在内容里面才能使用--> <!-- <img src="{{i
第六节:Vue指令:v-bind动态属性绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-10 3299
上一小节的学习,让我们理解以v开头的指令后面跟的将是表达式,同样标签也有一些合法的标签属性.如果想将这些属性的值变为表达式,我们可以使用Vue提供的v-bind:指令.因为动态属性style的值是一个对象,因此 我们可以把对象提取出来直接作为vue 数据data属性值,那么我们就可以直接绑定一个对象就可以了。动态绑定class 就是使用v-bind指令来绑定, 一但使用v-bind指令后,class属性的值不在是一个字符串,而是一个表达式,但是一旦使用了动态绑定, `style`属性的值将变成JS表达式,
vue的几个常见指令
最新发布
weixin_63111096的博客
09-18 350
如果不加.lazy时,你修改了文本框的值,对应{{msg}}会同步的变化,但是如果添加了.lazy修饰符时,你在修改文本框的值时,{{msg}}的值不会同步的变化,而是当该文本框失去焦点时,才去改变{{msg}}的值.v-if 指令 条件渲染,可以根据表达式的值在DOM中生成或移除一个元素,如果v-if表达式为true,那么对应元素的一个克隆将被重新插入DOM中,否则从DOM移除。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
v-bind用法详解
青山不改，绿水长流。
09-24 4965
因此，在v-bind 用于 style 时，Vue.js 专门增强了它。v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。值得一提的是 当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。（3）甚至我们可以在数组中用三元运算符，你也想根据条件切换列表中的 class，可以用三元表达式。（2）我们可以把一个数组传给 v-bind:class，以应用一个 class 列表。
Vue.js 中的 v-bind 指令：作用与使用详解
My_wife_QBL的博客
07-05 3659
在 Vue.js 中，指令是以v-前缀开头的特殊属性。指令的值可以是 JavaScript 表达式，用于在 DOM 元素上添加特定的行为。v-bind指令是 Vue.js 中用于动态绑定 HTML 属性和组件属性的重要指令。通过v-bind指令，可以将 Vue 实例中的数据动态地绑定到 HTML 元素的属性上，从而实现数据的动态更新和响应式渲染。v-bind指令的基本用法包括绑定 HTML 属性、绑定组件属性和绑定动态属性。高级用法包括绑定对象、绑定数组和绑定计算属性。在实际开发中，v-bind。
v-bind 的作用 以及：key的作用
weixin_30294295的博客
11-01 2766
在html代码中，v-bind绑定的是动态的表达式，而非固定的字符串，在v-bind后，就可以动态获取数据， 可以将v-bind理解为： 被v-bind修饰的都是动态获取的值。 而非被v-bind修饰的，仅仅是一个字符串 例如 :bind todo="item"; 在此例子中 item是一个表达式，item可以在其他地方动态变化； todo="item" 在此例子中，item...
V-bind详细使用
热门推荐
CaseyWei
10-22 6万+
v-bind 主要用于属性绑定，Vue官方提供了一个简写方式:bind，例如： 1 2 &lt;!--完整语法--&gt; &lt;av-bind:href="url"&gt;&lt;/a&gt; 1 2 &lt;!--缩写--&gt; &lt;a:href="url"&amp...
v-bind简单介绍
NSX-Truth
07-10 146
v-bind简单介绍 序 1、内置属性的绑定 控制台显示 2、绑定自定义属性 可以简写
Vue动态属性绑定详解：v-bind指令
"本文主要介绍Vue.js中的动态属性数据绑定，特别是v-bind指令的使用方法和常见应用场景。" Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。在Vue中，数据绑定是其核心特性之一，它允许开发者将数据模型...
Vue.js入门：MVVM模式与v-bind/v-on快捷语法详解
以上是Vue.js入门学习中的一些基础和常见用法，对于初学者理解双向数据绑定和组件化开发至关重要。通过这些概念，开发者可以更好地构建动态和交互式的Web应用。随着对Vue.js深入学习，还将涉及组件、指令、生命周期...
详解Vue中使用v-for语句抛出错误的解决方案
08-30
在Vue.js框架中，`v-for`指令是用于...通过遵循这些最佳实践，可以确保在使用`v-for`时避免常见的错误，并提高Vue应用的稳定性和性能。在实际开发中，理解并熟练运用这些概念对于构建高效、健壮的Vue应用程序至关重要。
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
10-15
组件内部可以使用 `v-bind` 和 `v-on` 来处理输入值的变化，同时使用自定义的方法来进行格式化和解析。 在使用自定义日期组件时，你只需要像这样在父组件中引入并使用 `v-model`： ```html <dates v-model=...
Vue内置指令详解：v-text, v-html, v-show等
它同步元素的值与Vue实例的数据，如`<input v-model="username">`。 10. **v-pre**： - `v-pre` 用于跳过当前元素及其子元素的编译过程，可以用于快速显示原始的Mustache语法，避免不必要的编译开销。 11. **v-...
VueJs(5)---V-bind指令
a8892117的博客
05-02 287
V-bind指令 一、概述 v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。 示例： <!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --&...
v-bind详解
weixin_44707104的博客
05-07 622
对象语法 通常，我们会传给v-bind一个对象，这样我们可以动态地切换一些属性值，比如绑定Class或者Style，像这样 // isBlue是布尔值，blue类是否存在取决于isBlue是否为真 <div :class="{ blue: isBlue }"></div> // thisFont是变量，字体大小随thisFont而变化 <div :style="{...
Vue的基础语法——插值操作，动态绑定，计算属性
yanhua1575的博客
05-16 927
一，插值操作 1.Mustache语法 也就是双大括号{{}}的写法，mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式 <div id="app"> <h2>{{message}},妍华!</h2> //插入到标签中 <h2>{{firstName}} {{lastName}}</h2> //使用了两个Mustache <h2>{{counter * 2}}</h2>
v-bind介绍
lianchen728的博客
01-08 1258
v-bind 除了将值插入到模板内容中，我们也需要将一些属性动态绑定。比如动态绑定a元素的href属性或者动态绑定img的src属性，这个时候我们就需要v-bind方法了。 v-bind基础 v-bind用于绑定一个或多个属性值，通过Vue实例中的data绑定元素的src和href，代码如下: <div id="app"> <!-- 错误的做法这里不可以适应Mustache语法 --> <!-- <img src="{{imgURL}}" alt=""&g
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值