vue 基础入门笔记 03:v-model、Class 与 Style 绑定
0 / 0 / 创建于 5年前 /
September 的个人博客
vue 基础入门笔记 03
- v-model 实现表单元素和data中的数据进行双向绑定
- :class 三种形式
- 数组形式
- 三元表达式
- 用对象代替三元表达式（提高可读性）
- style
- 键值对
- 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.class1{
font-size: 50px;
}
.class2{
color: red;
}
.class3{
font-weight: bold;
}
.class4{
background-color: blue
}
.active{
color: aqua
}
</style>
</head>
<body>
<div id="app">
<!-- 实现表单元素和model中的数据进行双向绑定 -->
<label>{{msg}}</label>
<input type="text" v-model="msg">
<!-- .class -->
<!-- 数组形式 -->
<input type="text" v-model='msg' :class='["class1","classs2"]'>
<!-- 三元表达式 -->
<input type="text" v-model='msg' :class='["class1","classs2",flag?"class3":"class4"]'>
<!-- 使用对象来代替三元表达式 提高可读性 -->
<input type="text" v-model='msg' :class='[{"active":flag}]'>
<!-- style 键值对形式 -->
<h1 :style="{color:'red','font-weight':'bold'}">style</h1>
<!-- style 键值对形式 -->
<h1 :style="style">style</h1>
<!-- 多个样式 -->
<h1 :style="[style,style2]">style</h1>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'hello world',
flag:true,
style:{color:'red','font-weight':'bold'},
style2:{'font-size':'100px'}
},
methods:{}
});
</script>
</body>
</html>本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号