往期内容
《Vue零基础入门教程》第六课:基本选项
《Vue零基础入门教程》第八课:模板语法
《Vue零基础入门教程》第九课:插值语法细节
《Vue零基础入门教程》第十课:属性绑定指令
《Vue零基础入门教程》第十一课:事件绑定指令
《Vue零基础入门教程》第十二课:双向绑定指令
《Vue零基础入门教程》第十三课:条件渲染
《Vue零基础入门教程》第十四课:列表渲染
1) 什么是样式绑定
通过绑定class
属性 或者 style
属性 修改样式
2) 绑定class属性
常见有两种语法
- 数组写法
- 对象写法
示例
<!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>Document</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
<style>
.red {
color: red;
}
.blue {
color: skyblue;
}
</style>
</head>
<body>
<div id="app">
<!-- 原生的写法 -->
<span class="red blue">一段文字</span>
<!-- 绑定class属性 -- 对象的写法 -->
<span :class="obj">对象的写法</span>
<!-- 绑定class属性 -- 数组的写法(推荐) -->
<span :class="arr">数组的写法</span>
<span :class="foo">绑定一个变量</span>
<span :class="flag ? 'red' : 'blue'">使用表达式</span>
</div>
<script>
const { createApp } = Vue
const vm = createApp({
data() {
return {
obj: {
red: true,
blue: true,
},
arr: ['red', 'blue'],
foo: 'red',
flag: true,
}
},
}).mount('#app')
</script>
</body>
</html>
3) 绑定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>Document</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 原生的写法 -->
<div style="font-size: 32px; color: red">原生的写法</div>
<!-- 绑定style属性 -- 对象写法 -->
<div :style="obj">对象的写法</div>
</div>
<script>
const { createApp } = Vue
const vm = createApp({
data() {
return {
obj: {
// 'font-size': '32px',
fontSize: '32px',
color: 'red',
},
}
},
}).mount('#app')
</script>
</body>
</html>
4) 作业
💡 需求
实现京东tab栏切换
参考答案
<!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>Document</title>
<!-- 1.1 引入vue.js -->
<script src="../node_modules/vue/dist/vue.global.js"></script>
<!-- 2.2 实例静态页面(CSS部分) -->
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.menu-tab {
display: flex;
justify-content: space-between;
margin: 50px auto;
height: 40px;
width: 700px;
border: 1px solid #eee;
border-bottom: 1px solid #e4393c;
background-color: #f7f7f7;
box-sizing: border-box;
}
.menu-tab .menu-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: #666;
cursor: pointer;
}
.menu-tab .menu-item:hover {
color: #e4393c;
}
.menu-tab .menu-item.current {
color: #fff;
background-color: #e4393c;
}
</style>
</head>
<body>
<!-- 1.2 编写页面容器 -->
<div id="app">
<!-- 2.1 实例静态页面(HTML部分) -->
<ul class="menu-tab">
<!-- <li
v-for="(item, index) in items"
class="menu-item"
:class="index == active ? 'current' : '' "
@click="active = index"
> -->
<li
v-for="(item, index) in items"
class="menu-item"
:class="index == active ? 'current' : '' "
@click="handleClick(index)"
>
{{item}}
</li>
</ul>
</div>
<!-- 1.3 创建vue实例对象 -->
<script>
const { createApp } = Vue
const vm = createApp({
data() {
return {
items: ['商品介绍', '规格与包装', '售后保障', '商品评价(2000+)', '手机社区'],
active: 0,
}
},
methods: {
handleClick(i) {
console.log(i)
this.active = i
},
},
}).mount('#app')
</script>
</body>
</html>