用Vue实现电影分类功能

发现我还有这个号,从今天开始,每天至少实现一个小功能,希望对自己的技术有所提升

电影分类

<!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内容切换,就是点击完之后还会切换页面但能力实在有限,所以等我好好研究,等过几天再发把

用Vue实现电影分类功能相关推荐

python爬取豆瓣电影信息可行性分析_Python爬虫实现的根据分类爬取豆瓣电影信息功能示例...
本文实例讲述了Python爬虫实现的根据分类爬取豆瓣电影信息功能.分享给大家供大家参考,具体如下: 代码的入口:if __name__ == '__main__': main()#! /usr/bin ...
android 基于豆瓣 Api 的客户端，包含电影分类，图书分类，电影榜单，收藏功能，搜索功能。
JianDou 项目地址:ChinaLHR/JianDou 简介:基于豆瓣 Api 的客户端,包含电影分类,图书分类,电影榜单,收藏功能,搜索功能. 更多:作者提 Bug 示例 APK ...
基于Springboot+vue的电影购票系统(源代码+数据库)057
代码地址 https://gitee.com/ynwynwyn/movie-puchase2-public 基于Springboot+vue的电影购票系统(源代码+数据库) 一.系统介绍本项目前后端 ...
python爬取豆瓣电影并分析_爬取豆瓣电影top250提取电影分类进行数据分析
标签(空格分隔):python爬虫一.爬取网页,获取需要内容我们今天要爬取的是豆瓣电影top250 页面如下所示: 我们需要的是里面的电影分类,通过查看源代码观察可以分析出我们需要的东西.直接进入 ...
爬取豆瓣电影top250提取电影分类进行数据分析
标签(空格分隔):python爬虫一.爬取网页,获取需要内容我们今天要爬取的是豆瓣电影top250 页面如下所示: 我们需要的是里面的电影分类,通过查看源代码观察可以分析出我们需要的东西.直接进入 ...
python提取ajax异步加载数据_python爬取豆瓣电影分类排行榜引出的异步加载（AJAX）问题...
1.背景之前的文章中已经介绍过猫眼TOP100的电影信息爬取案例,网页每页有10条电影信息,通过翻页发现URL变化规律构造循环爬取10页100条全部电影信息.但是豆瓣电影分类排行榜的网页情况就所不同 ...
使用EasyExcel添加多级分类功能
绪论当面对很多数据要处理,并且需要导入导出Excel表格时.在使用POI时发现非常耗内存,这时GitHub上的阿里开源项目Easy Excel可以解决此类问题,它是基于java的读写Excel,十分 ...
机器学习入门——KNN电影分类
KNN电影分类 1构建已经分类好的原始数据集为了方便验证,这里使用python的字典dict构建数据集,然后再将其转化成DataFrame格式. import pandas as pd #定义字 ...
如何用机器学习算法来进行电影分类?(含Python代码)
电影分析--K近邻算法周末,小迪与女朋友小西走出电影院,回味着刚刚看过的电影. 小迪:刚刚的电影很精彩,打斗场景非常真实,又是一部优秀的动作片! 小西:是吗?我怎么感觉这是一部爱情片呢?真心被男主女 ...

用Vue实现电影分类功能

电影分类

用Vue实现电影分类功能相关推荐

最新文章

热门文章