1. 基本语法
语法：
v-bind:属性名.修饰符="属性值"简写：
：属性名.修饰符 = "属性值"属性名
h5中有意义的属性名DOM属性名(className,innerHTML) ==>将驼峰转为连字符“-”，并添加修饰符.propvue绑定属性时是以html属性为基准的,h5中是不存在大小写的属性值： data数据仓库中的变量名修饰符： prop，用于修饰当绑定的属性为DOM属性时
2. 功能
将标签的属性以vue语法的方式绑定动态数据
3. 特殊属性
boolean属性： input文本框的disabled
语法：
:disabled="属性值"属性值：JS中可以转换成boolean的一切变量空字符串"" 以及0： 返回true, 文本框是禁用状态,
这点不同于原生JSnull以及undefined: 返回false，文本框是启用状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" :disabled="flag">
<br>
<br>
<!-- 需求：点击发送验证码，按钮禁用，按钮文本改为“重新发送(60s)” ，并且后面的数字动态减少，当数字减少到小于等于0时
按钮重新启用，按钮的文本重新恢复成发送验证码
-->
<input type="button" :value="val" :disabled="flag" @click="sendCode">
</div>
<script>
new Vue({
el:"#app",
data:{
flag: false,
val:"发送验证码",
num: 10
// flag: "", //禁用
//flag:0, //禁用
// flag: null, //启用
// flag: undefined //启用
},
methods:{
sendCode(){
//按钮禁用
this.flag = true;
this.val = "重新发送(" + this.num + "s)";
//按钮文本改为重新发送
var timer = setInterval(()=>{ //这边必须使用箭头函数，因为这边是作为一个回调函数存在在这里的，回调函数的this是指向于回调函数调用时的上下文，即window,而箭头函数在new对象中是恒指向于new出来的实例的
if(this.num <= 0){ //当计时结束后，清除计时器
clearInterval(timer);
this.flag = false;
this.val = "发送验证码";
this.num = 10;
}else{
this.num --;
this.val = "重新发送(" + this.num + "s)";
}
},1000)
}
}
})
</script>
</body>
</html>
class属性
语法：
：class="属性值" || ：classNam.prop = "属性值"属性值
字符串： 实现样式的快速部署，注意样式前需要加空格数组：实现样式的动态追加，注意删除的时候，没办法控制具体删除哪个样式,只能根据数组中的元素的顺序进行删除对象：实现样式的互斥,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./vue.js"></script>
<style>
.fc{
color: red;
}
.bc{
background: #ccc;
}
.sta{
background:#ccc;
}
.success{
background: orange;
}
.error{
background: green;
}
</style>
<title>class属性绑定</title>
</head>
<body>
<div id="app">
<!-- 字符串 -->
<div :class="classStr">属性绑定</div>
<button @click="addBc">添加背景色</button>
<!-- 数组 -->
<div :class="classArr">属性绑定</div>
<button @click="addBc">添加背景色</button>
<!-- 对象：【实现功能：文本框默认灰色背景，输入字符数小于等于5个背景色为橙色，大于5个背景色为绿色】 -->
<input type="text" :class="classObj" @input=changeBc($event)>
</div>
<script>
new Vue({
el:"#app",
data:{
// flag: "", //禁用
//flag:0, //禁用
// flag: null, //启用
flag: undefined, //启用
classStr:'fc',
classArr:['fc'],
classObj:{
'sta':true,
'success':false,
'error':false
}
},
methods:{
addBc(){
// this.classStr += " bc"; //注意：这边bc的前面需要加空格
this.classArr.push('bc')
},
changeBc(e){
console.log(e.target);
this.classObj.success = e.target.value.length <= 5;
this.classObj.error = e.target.value.length > 5;
}
}
})
</script>
</body>
</html>
style属性
语法：
v-bind:style = "属性值" ||
：style = "属性值"属性值
字符串：正常的css样式对象： 多个css样式数组：将多个对象合并成一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 字符串 -->
<p :style="styleStr">style属性绑定-字符串</p>
<!-- 对象 -->
<p :style="styleObj1">style属性绑定-对象</p>
<!-- 数组 -->
<p :style="[styleObj1,styleObj2]">style属性绑定-数组</p>
</div>
<script>
new Vue({
el:"#app",
data:{
styleStr:'color:red',
styleObj1:{
color:"red",
border:"1px solid red"
},
styleObj2:{
backgroundColor:'#ccc'
}
}
})
</script>
</body>
</html>
