我的感悟

你真的了解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指令的一些注意事项

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

  总结

  ---

  ---

  我的感悟

  你真的了解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......}

  
  
  	
  	
  	
  	Document
  	
  		.active{
  			color: red;
  		}
  	
  
  
  	
  		
  {{message}}
  	
      //所引用的Vue文件
  	
  	
  		const app = new Vue({
  			el: '.app',
  			data: {
  				
  				message: '你好Vue!',
  				isActive: true,
  				isLine: true
  			},
  		})
  	
  
  

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

           语法:

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

  		
  {{message}}
  	
  	
  	
  		const app = new Vue({
  			el:'#app',
  			data: {
  				message: '你好Vue!',
  				active: 'a',
  				lineL: 'b'
  			},
  		})
  	

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

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

  
  
  	
  	
  	
  	Document
  	
  		.active{
  			color: red;
  		}
  	
  
  
  	
  		
  {{message}}
  	
  	
  	
  		const app = new Vue({
  			el:'#app',
  			data: {
  				message: '你好Vue!',
  				finalSize: 100,
  				finalColor: 'red',
  			},
  		})
  	
  
  

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

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

  		
  {{message}}
  		{message}} -->
  	
  	
  	
  		const app = new Vue({
  			el:'#app',
  			data: {
  				message: '你好Vue!',
  				finalSize: 100,
  				finalColor: 'red',
  				style1: {background: 'red'},
  				style2: {color: 'white'}
  			},
  		})
  	

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

  this is test
  

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

  this is test
  

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

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

    data() {
      return {
        // 单号是否禁用
        disabledData:true,
        // 班组人员信息展示

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

  ---

  总结

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