用Vue实现电影分类功能

最新推荐文章于 2024-07-07 18:00:46 发布

这里是不会敲代码的三木

最新推荐文章于 2024-07-07 18:00:46 发布

阅读量1.5k

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/qq_38594742/article/details/120353347

版权

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

电影分类

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

这里是不会敲代码的三木

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
用Vue实现电影分类功能

发现我还有这个号,从今天开始,每天至少实现一个小功能,希望对自己的技术有所提升电影分类<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue基础 -- 电影分类</title> <style> #app>* { margin-left: 10px; } .children { w
复制链接

扫一扫