v-bind详解与常见用法

v-bind详解与常见用法

我的感悟

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


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

文章目录

  • 目录

    我的感悟

    文章目录

    我的感悟

    一、v-bind是什么?

    二、详细用法总结

     1.v-bind介绍      

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

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

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

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

    三、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-***patible" 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-***patible" 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>
javascript">  data() {
    return {
      // 单号是否禁用
      disabledData:true,
      // 班组人员信息展示

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


总结

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

转载请说明出处内容投诉
CSS教程_站长资源网 » v-bind详解与常见用法

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买