发现我还有这个号,从今天开始,每天至少实现一个小功能,希望对自己的技术有所提升
电影分类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue基础 -- 电影分类</title>
<style>
#app>* {
margin-left: 10px;
}
.children {
width: 250px;
height: 100px;
background-color: #333333;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div id="app">
<!--
静态数据渲染
<strong>全部</strong>
<span>动作</span>
<span>爱情</span>
<span>历史</span>
<span>纪录片</span>
-->
<!--
动态数据渲染 单个标签
<span v-for="(item,index) in movieTypes" :key="index">{{item}}</span>
-->
<!-- 动态渲染 多个标签
1. 将多个标签加个父级标签
2. 将v-for循环给父级标签
2.1 key下标要分别给子级标签
现在的效果是每一个都重复,不符合需求
3. 将v-if或者v-show给子级标签判断留谁去掉谁
3.1 先确定data里面是否创建了current来当判断条件
-->
<!--
功能一: 点击某个某个加粗
提醒: vue中不要想着操作节点,而是操作数据
-->
<template v-for="(item,index) in movieTypes">
<span>
<strong :key="index" v-if="item.title == current">
{{item.title}}
</strong>
<span :key="index" v-else @click="current = item.title">
{{item.title}}
</span>
</span>
</template>
<div class="children">
这里是内容
</div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
movieTypes: [{
title: "全部",
text: "这是全部的内容",
backgroundColor: "blue"
},
{
title: "动作",
text: "这是动作的内容",
backgroundColor: "yellow"
},
{
title: "历史",
text: "这是历史的内容",
backgroundColor: "green"
},
{
title: "纪录片",
text: "这是纪录片的内容",
backgroundColor: "red"
},
{
title: "战争",
text: "这是战争的内容",
backgroundColor: "block"
}
],
current: "全部"
}
},
methods: {}
});
</script>
</body>
</html>
</html>
通过data里面返回的数据可以知道,其实还想实现的功能还有tap内容切换,就是点击完之后还会切换页面但能力实在有限,所以等我好好研究,等过几天再发把