Vue基础知识(三) - v-bind的其他使用

关于Vue的v-bind指令还有其他的用法:

• 1.绑定style属性
• 2.动态绑定属性名
• 3.直接绑定对象

1.绑定syle属性

• 1 普通html的style属性使用

<h2 style="color: red; font-size: 30px">哈哈哈</h2>

• 效果: image.png

• 2.style中的使用某些值, 值是来自data函数中
• 2.1 动态绑定style, 在后面跟上对象类型 (重要)

<div id="app">
  <h2 :style="{ color: fontColor, fontSize: fontSize + 'px' }">Hello World</h2>
  // 或
  <h2 :style="{ color: fontColor, 'font-size': fontSize + 'px' }">Hello World</h2>
</div>
  const app = Vue.createApp({
      // data: option api
      data() {
        return {
          fontColor: 'blue',
          fontSize: 30
        }
      }
  });

  app.mount('#app');

注意:
1.因为是对象语法,所以当遇到CSS属性中含有段横杆'-'的属性名,应该使用驼峰写法或用引号把属性名括起来, 比如字体大小是 fontSzie 或 'font-size'。
2.在书写含有单位的CSS属性值时,应当把单位带上,不能遗漏,尽管Vue会帮我们容错,但是我们自己写上去是最好的!

• 效果: image.png

• 2.2 动态的绑定属性,这个属性是一个对象

<div id="app">
  <h2 :style="objStyle">Hello World</h2>
</div>

const app = Vue.createApp({
  // data: option api
  data() {
    return {
      objStyle: {
        fontSize: '50px',
        color: 'green'
      }
    }
  }
});

app.mount('#app');

• 效果: image.png

• 2.3 style的数组语法

<div id="app">
  <h2 :style="[objStyle, { backgroundColor: 'purple' }]">Hello World</h2>
</div>

const app = Vue.createApp({
  // data: option api
  data() {
    return {
      objStyle: {
        fontSize: '50px',
        color: 'green'
      }
    }
  }
});

app.mount('#app');

• 效果: image.png

2. v-bind动态绑定属性名

当我们的属性名是不确定是时候,我们可以采用v-bind的方式来动态绑定属性名
书写: <标签 :[data中的变量名]="值" ></标签>

<div id="app">
  <h2 :[name]="'title'">Hello World</h2>
</div>


const app = Vue.createApp({
  // data: option api
  data() {
    return {
      name: 'class'
    }
  }
});

app.mount('#app');

• 效果:

  
  image.png

3.v-bind直接绑定对象

当我们想把对象的所有内容绑定作为属性时,可以采用v-bind绑定对象的方法
`写法: v-bind="对象"

<div id="app">
  <h2 v-bind="infos">Hello Bind</h2>
</div>

const app = Vue.createApp({
  // data: option api
  data() {
    return {
      infos: { name: 'zhangsan', age: 32, height: 1.78, address: '深圳市' }
    }
  }
});

app.mount('#app');

• 效果: