2.4-web

…i

已于 2024-02-04 18:18:57 修改

阅读量407

点赞数 7

文章标签： java 服务器前端

于 2024-02-04 18:18:19 首次发布

本文链接：https://blog.csdn.net/winterphy/article/details/136029993

版权

冰墩墩心情刻度尺

目标

请在 js/index.js 文件中补全代码，具体需求如下：

不同心情下的冰墩墩对应类名如下表：

心情:	类名
不满意	`.not-satisfied`
有点不满意	`.a-little-unsatisfied`
普通	`.ordinary`
满意	`.satisfied`
棒	`.great`

在初始状态下，冰墩冰墩元素（class=BingDunDun）处于不满意状态。
进度条在不同位置时，通过给冰墩冰墩元素（class=BingDunDun）添加对应类名完成不同心情的效果切切换。
不能修改原有类名和添加多余类名，例：满意状态下的对应该是 class=BingDunDun satisfied。

const range = document.getElementById("range"); // 获取进度条 
const BingDunDun = document.querySelector(".BingDunDun");  //获取冰墩墩元素

// TODO: 待补充代码
let className= "not-satisfied"
BingDunDun.classList.add(className)

range.onchange = (e) => {
  let value = Number(e.target.value); // value 进度条的值
  // TODO: 待补充代码
  BingDunDun.classList.remove(className)
  switch(value){
    case 0:
    className= "not-satisfied"
    break;
    case 25:
    className= "a-little-unsatisfied"
    break;
    case 50:
    className= "ordinary"
    break;
    case 75:
    className= "satisfied"
    break;
    case 100:
    className= "great"
    break;

  }
  BingDunDun.classList.add(className)
};

classList: 这是HTML元素的一个属性，允许你添加、删除、切换和检查元素的类名。
add(className): 这是classList对象的一个方法，用于向当前元素添加一个或多个类名。
className: 这是你想添加到元素的类名。它应该是一个字符串。

输入搜索联想

目标

请在 index.html 文件中补全代码，最终实现以下需求：

页面数据表中表头首字母大写（注意：不能是全大写，请勿修改 data 选项中已提供的数据）。
在搜索输入框中，输入相关单词或字母后（不区分大小写），显示每条数据的 Name 字段中包含该搜索内容的数据列表。

  <body>
    <div id="app">
      <!-- TODO：请在下面实现需求 -->
      <span>搜索名字: </span>
      <input v-model="searchQuery" placeholder="输入要搜索的名字" />
      <table>
        <thead>
          <tr>
            <td v-for="col in columns">{{col.slice(0,1).toUpperCase() + col.slice(1)}}</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="entry in searchData">
            <td v-for="col in columns">{{entry[col]}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
<script>
  // TODO：请在下面实现需求
  new Vue({
    el: "#app",
    // 注意：请勿修改 data 选项中的数据！！！
    data: {
      searchQuery: "",
      columns: ["name", "gender", "age"],
      data: [
        {
          name: "rick",
          gender: "male",
          age: 21,
        },
        {
          name: "demen",
          gender: "male",
          age: 26,
        },
        {
          name: "Jack",
          gender: "male",
          age: 26,
        },
        {
          name: "John",
          gender: "female",
          age: 20,
        },
        {
          name: "Lucy",
          gender: "female",
          age: 16,
        },
      ],
    },
    computed: {
    searchData() {
      return this.data.filter(item => item.name.toLowerCase().includes(this.searchQuery.toLowerCase()))
    }
  }
  });
</script>

通过名为searchData计算属性。

它用于过滤 data 数组，只保留那些其 name 属性包含 searchQuery 的项。让我们逐步分析这段代码：