【后端速成Vue】v-bind和v-model
篮球哥找工作专属IT岗位内部推荐：
专属内推链接：内推通道
前言：
前面的文章看完，可能会有疑问，在 Vue 中如何操作类名呢？我要想动态的控制类名该怎么办？这篇文章就来解决这个问题， Vue 扩展了
v-bind 的语法，可以使用 Vue 针对 class 类名 和 style 行内样式进行控制，下面就一起来学习 v-bind 的使用。
1、v-bind 操作类名
对象的方式绑定类名：
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }">div>
什么意思呢，这里 :class 传递了一个对象，这个对象有两个属性，分别是 类名1 和 类名2，属性就是类名，值就是布尔值，如果值是 true，就给 div 添加这个类，否则不添加这个类
数组的方式绑定类名
<div class="box" :class="[ 类名1, 类名2, 类名3 ]">div>
上述给 :class 传递了一个列表，列表里面的元素作为类名，此操作会将列表里面所有的类名都添加到这个 div 上
上述注意，使用 class 属性 和 :class 属性是可以同时存在的，至于 class 和 :class 的区别可以看前面的文章，说简单点，如果属性接收的是变量就加上 : 即可。如果接收的是常量就不用加 : 。上述 class 和 :class 同时存在，采取的追加类名的方式。
例如：title=“标题” 和 :title=“curTitle”
例子：
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>Documenttitle>
<style>
.box {
width: 200px;
height: 200px;
border: 3px solid #000;
font-size: 30px;
margin-top: 10px;
}
.bgc {
background-color: pink;
}
.big {
width: 300px;
height: 300px;
}
style>
head>
<body>
<div id="app">
<div class="box" :class="{ bgc: true, big: true }">ZLCodediv>
<div class="box" :class="['bgc', 'big']">ZLCodediv>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
}
})
script>
body>
html>
2、v-bind 操作 style
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }">div>
适用场景：某个具体属性的动态设置
这里就是直接传递了一个 js 的对象给 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>Documenttitle>
<style>
.box {
width: 200px;
height: 200px;
background-color: rgb(131, 51, 64);
}
style>
head>
<body>
<div id="app">
<div class="box" :style="{ width: '400px', height: '400px', backgroundColor: 'green' }">div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
}
})
script>
body>
html>
上述虽然 box 类设置了背景色，但是同时使用了 v-bind 操作 style 的样式，当类样式和行类样式同时出现，行类样式优先级更高，所以此时 .box 这个元素的背景色是 green。
3、v-model 应用于表单元素
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
v-model 绑定表单元素，其实就是实现了一个双向绑定！！！
如何理解？将 v-model 运用到 input 表单元素上，也就是有一个 js 的变量与 input 的 value 值进行绑定了，那么当用户往 input 输入时，绑定的 js 的变量里面的值也会随着用户的输入而发生改变，js 变量值发生改变时，input 的输入框的值也会发生改变。这就是双向绑定。
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>Documenttitle>
head>
<body>
<div id="app">
<input type="text" v-model="username">
<br/><br/>
<div>js 变量 username 的值：{{ username }}div>
<br/><br/>
<button @click="modify()">单击将 username 值改成张三button>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
username: ''
},
methods: {
modify () {
this.username = "张三"
}
},
})
script>
body>
html>
复制这个例子的代码，进入 vscode 粘贴到 .html 用浏览器打开，你就能弄懂什么是 v-model 绑定表单所对应的双向绑定了。
对于 v-model 能运用的表单元素还有很多，比如：
输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> value
...
箭头后面就是绑定元素后，对应绑定的值，比如 input 的 text 输入框，绑定的就是 input 的 value 值，而 input 的 radio 绑定的就是 checked 选中的值。
具体看懂并运行下面的例子即可：
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>Documenttitle>
<style>
textarea {
display: block;
width: 240px;
height: 100px;
margin: 10px 0;
}
style>
head>
<body>
<div id="app">
<h3>信息收集注册h3>
姓名：
<input type="text" v-model="username">
<br><br>
是否单身：
<input type="checkbox" v-model="isSingle">
<br><br>
性别:
<input v-model="gender" type="radio" name="gender" value="1">男
<input v-model="gender" type="radio" name="gender" value="2">女
<br><br>
所在城市:
<select v-model="cityId">
<option value="101">北京option>
<option value="102">上海option>
<option value="103">成都option>
<option value="104">南京option>
select>
<br><br>
自我描述：
<textarea v-model="desc">textarea>
<button>立即注册button>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
isSingle: false,
gender: "2",
cityId: '102',
desc: ""
}
})
script>
body>
html>