【一】Class属性绑定：
1:对象语法
我们可以传给v-bind:class 一个对象，以动态地切换class。
比如如果这里isShow的值为true 则会被渲染成class='active' ,结果也会渲染变红；如果为false ,结果将不会被渲染。 （如下所示）
2：数组语法
我们可以把一个数组传给v-bind:class，以应用一个class列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
<style>
.active{font-size: 50px;}
.out{color: red;}
.myBox{text-decoration: underline;}
</style>
</head>
<body>
<div id="app">
<!-- <h1 :class="[isActive,isOut,myBox?'myBox':'']">vue开发</h1> -->
<h1 :class="[isActive,isOut,{myBox:myBox}]">vue开发</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isActive:"active",
isOut:"out",
myBox:true
},
methods: {
}
});
</script>
</body>
</html>【二】绑定内联样式（行内样式style的绑定方法）
1：对象语法
v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<h1 :style="{color:myColor,fontSize:size+'px'}" :title="tit">宋思昊是猪</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
myColor:"pink",
size:80,
},
methods: {
}
});
</script>
</body>
</html> 
2：数组语法
v-bind:style的数组语法可以将多个样式对象应用到同一个元素上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<h1 :style="[btnStyle1,btnStyle2]">优课学院</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
btnStyle1:{
background:"pink"
},
btnStyle2:{
fontSize:"80px"
}
},
methods: {
}
});
</script>
</body>
</html>
【三】表单输入绑定
1：v-model双向绑定
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
上图所示，当input内值进行改变时，首先改变的data中val值，然后再将data中的val值渲染到前端中的val。而不是由input内的值改变直接渲染前端val中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<h1>{{val}}</h1>
<input type="text" v-model="val">
<br>
<!-- 多行文本 -->
<Textarea v-model="text"></Textarea>
<p>{{text}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
val:"vue开发",
text:"优课学院vue开发"
},
methods: {
}
});
</script>
</body>
</html>2：其他表单类型的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<label>
<input type="checkbox" v-model="check">同意用户协议
</label>
<h1>{{check}}</h1>
<hr>
<!-- 复选框 -->
爱好：
<label><input type="checkbox" value="看书" v-model="checks">看书</label>
<label><input type="checkbox" value="打篮球" v-model="checks">打篮球</label>
<label><input type="checkbox" value="打羽毛球" v-model="checks">打羽毛球</label>
<label><input type="checkbox" value="游泳" v-model="checks">游泳</label>
<h2>{{checks}}</h2>
<hr>
<!-- 单选框 -->
性别：
<label><input type="radio" value="男" v-model="radio">男生</label>
<label><input type="radio" value="女" v-model="radio">女生</label>
<label><input type="radio" value="保密" v-model="radio">保密</label>
<h3>{{radio}}</h3>
<hr>
<!-- 下拉框 -->
<select v-model="select">
<option value="">--请选择--</option>
<option value="专科">专科</option>
<option value="本科">本科</option>
<option value="研究生">研究生</option>
<option value="博士">博士</option>
</select>
<h4>{{select}}</h4>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
check:true,
checks:[],
radio:"保密",
select:""
},
methods: {
}
});
</script>
</body>
</html>
3：表单绑定的修饰符
《1》 .lazy:
失去焦点同步一次
《2》.number：
如果想自动将用户的输入值转为数值类型。
《3》.trim:
如果想自动过滤用户输入的首尾空白字符。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
