Vue学习：07-属性绑定

一、属性绑定指令

● 响应式地绑定一个元素属性，应该使用v-bind:指令

● 如果绑定的值是null或者undefined，那么该属性将会从渲染的元素上移除

● 因为v-bind非常常用，我们提供了特定的简写语法 “ : ”

App.vue

<script setup>

import { ref } from 'vue';

let picture = ref({
  src: 'https://uploadfile.bizhizu.cn/2015/0424/20150424015229741.jpg', // 图像地址
  width: 200 // 显示宽度
})

</script>

<!-- 视图区域（view） -->
<template>
  <input type="range" min="100" max="500" v-model="picture.width">
  <hr>
  <!-- v-bind: 为src属性绑定指定的数据源 -->
  <img v-bind:src="picture.src" v-bind:width="picture.width">
  <hr>
  <!-- :是v-bind:的缩写形式 -->
  <img :src="picture.src" :width="picture.width">
  <hr>
  <!-- 如果绑定的值是null或者undefined，那么该属性将会从渲染的元素上移除 -->
  <button @click="picture.width=null">设置宽度为NULL</button>
</template>

二、动态绑定多个属性值

直接使用v-bind来为元素绑定多个属性及其值

App.vue

<script setup>

import { ref } from 'vue';

let attrs = ref({
  class: 'error',
  id: 'borderBlue'
})

</script>

<!-- 视图区域（view） -->
<template>
  <!-- 直接使用v-bind来为元素绑定多个属性及其值 -->
  <button v-bind="attrs">我是一个普通的按钮</button>
</template>

<style>
  .error {
    background-color: rgb(167,58,58);
    color: white;
  }

  #borderBlue {
    border: 2px solid rgb(44,67,167);
  }
</style>

三、绑定class和style属性

class和style可以和其他属性一样使用v-bind将它们和动态的字符串绑定；但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的；因此，Vue专门为class和style的v-bind用法提供了特殊的功能增强；除了字符串外，表达式的值也可以是对象或数组。

（一）class属性绑定

1、绑定对象

App.vue

<script setup>

import { ref } from 'vue';

let btnClassObject = ref({
  error: false,  //主题色
  flat: false    //阴影
})

let capsule = ref(false)  //胶囊
let block = ref(false)    // 块

</script>

<!-- 视图区域（view） -->
<template>
  <input type="checkbox" v-model="btnClassObject.error">error
  <input type="checkbox" v-model="btnClassObject.flat">flat
  <br>
  <br>
  <button :class="btnClassObject">我是一个普通的按钮</button>

  <hr>
  <input type="checkbox" v-model="capsule">胶囊
  <input type="checkbox" v-model="block">块
  <br>
  <br>
  <button :class="{'rounded':capsule,'fullWidth':block}">我是一个普通的按钮</button>
</template>

<style>
  button {
    border:none;
    padding: 15px 20px;
    background-color: rgb(179,175,175);
  }
  .error {
    background-color: rgb(167,58,58);
    color: white;
  }
  .flat {
    box-shadow: 0 0 8px gray;
  }
  .rounded {
    border-radius: 100px;
  }
  .fullWidth {
    width: 100%;
  } 
</style>

2、绑定数组

App.vue

<script setup>

import { ref } from 'vue';

let btnTheme = ref([])  //按钮class数组

let capsule = ref(false)  //胶囊
let widthTheme = ref([])  //宽度数组

</script>

<!-- 视图区域（view） -->
<template>
  <input type="checkbox" value="error" v-model="btnTheme">error
  <input type="checkbox" value="flat"  v-model="btnTheme">flat
  <br>
  <br>
  <!-- 直接使用数组数据源，数组中有哪些值，直接在该元素的class里出现对应的类名 -->
  <button :class="btnTheme">我是一个普通的按钮</button>

  <hr>
  <input type="checkbox" v-model="capsule">胶囊
  <input type="checkbox" value="fullWidth" v-model="widthTheme">块
  <br>
  <br>
  <!-- 数组和对象一起使用 -->
  <button :class="[{'rounded':capsule},widthTheme]">我是一个普通的按钮</button>
</template>

<style>
  button {
    border:none;
    padding: 15px 20px;
    background-color: rgb(179,175,175);
  }
  .error {
    background-color: rgb(167,58,58);
    color: white;
  }
  .flat {
    box-shadow: 0 0 8px gray;
  }
  .rounded {
    border-radius: 100px;
  }
  .fullWidth {
    width: 100%;
  } 
</style>

（二）style属性绑定

1、绑定对象

App.vue

<script setup>

import { ref } from 'vue';

let btnTheme = ref({
  backgroundColor: '#FF0000',  //背景色
  color: '#000000'  //文本色
})

let backColor = ref('#0000FF')  //背景色
let color = ref('#FFFFFF')      //文本色
let borRadius = ref(20)         //边框圆角

</script>

<!-- 视图区域（view） -->
<template>
  背景色：<input type="color" v-model="btnTheme.backgroundColor">
  文本色：<input type="color" v-model="btnTheme.color">
  <br>
  <br>
  <!-- style可以直接绑定对象数据源，但是对象数据源的属性名当样式属性（驼峰命名法，kebab-case形式） -->
  <button :style="btnTheme">我是一个普通的按钮</button>

  <hr>
  背景色：<input type="color" v-model="backColor">
  文本色：<input type="color" v-model="color">
  边框圆角：<input type="range" min="0" max="20" v-model="borRadius">
  <br>
  <br>
  <!-- style可以直接写对象，但是对象的属性名当样式属性（驼峰命名法，kebab-cased形式） -->
  <button :style="{
    backgroundColor:backColor,
    color,
    'border-radius': borRadius + 'px'
  }">我是一个普通的按钮</button>
</template>

<style>
  button {
    border:none;
    padding: 15px 20px;
    background-color: rgb(179,175,175);
  }  
</style>

2、绑定数组

还可以给:style绑定一个包含多个样式对象的数组，这些对象会被合并后渲染到同一元素上。

App.vue

<script setup>
import { ref } from 'vue';

const btnTheme = ref([
  {
    backgroundColor: '#FF0000',   //背景色
    color: '#FFFFFF'   //文本色
  },
  {
    borderRadius: 0  //边框圆角
  }
])

const colorTheme = ref({
  backgroundColor: '#000000',  //背景色
  color: '#FFFFFF'   //文本色
})

const radiusTheme = ref({
  borderRadius: 0   //边框圆角
})

</script>

<!-- 视图区域（view） -->
<template>
  背景色：<input type="color" v-model="btnTheme[0].backgroundColor">
  文本色：<input type="color" v-model="btnTheme[0].color">
  胶囊：<input type="checkbox" true-value="5px"  false-value="0" 
  v-model="btnTheme[1].borderRadius">
  <br>
  <br>
  <!-- 直接传入数组 -->
  <button :style="btnTheme">我是一个普通的按钮</button>

  <hr>
  背景色：<input type="color" v-model="colorTheme.backgroundColor">
  文本色：<input type="color" v-model="colorTheme.color">
  胶囊：<input type="checkbox" true-value="5px" false-value="0" 
  v-model="radiusTheme.borderRadius">
  <br>
  <br>
  <!-- 直接写数组 -->
  <button :style="[colorTheme,radiusTheme]">我是一个普通的按钮</button>
</template>

<style>
  button {    
    padding: 15px 20px;
    border: none;
  }  
</style>