代码编织梦想

 关键代码:

<ul>
    <li v-for="(item,index) in quets"
        :class="{active: currentIndex===index}"
        @click="liClick(index)">
      {{index}}.{{item}}
    </li>
  </ul>

全部代码: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .active{
      color:red
    }
  </style>
</head>
<body>

<!--遍历列表,第一个元素显示为红色,其他的元素点击后变红-->
<div id="app">
  <ul>
    <li v-for="(item,index) in quets"
        :class="{active: currentIndex===index}"
        @click="liClick(index)">
      {{index}}.{{item}}
    </li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          quets:["why","when","how","where"],
          currentIndex:0
        },
        methods:{
      liClick(index)
      {
        this.currentIndex=index
      }
        }
  },

  )
</script>

</body>
</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_54327001/article/details/127992874

十天学完vue学习总结_huangss19的博客-爱代码爱编程

一、学习时间的安排 每次学习一门新语言的时候,我会习惯性创建一个文件夹,到我学完Vue基础时一共用了十天的时间。每一天几乎是一个知识点,或者是知识点对于的作业或者是项目。  二、共有多少个知识点可以学习 做完思维导图之后,我总结出一共只需要学习十一个知识点。 下面这三个都比较基础,因此我放在了一篇博客中。 1、vue简介 内容比

vue 项目中用户登录及 token 验证的思路_前端不加班的博客-爱代码爱编程

vue-router 导航守卫 所谓“导航”,即路由正在发生变化。可在路由跳转时完成一些操作,而 router.beforeEach() 全局前置守卫可以在路由跳转前对现在状态进行校验,例如验证用户的登录状态,若未登录则可以

vue3留言墙项目——头部和底部静态页面搭建_lalaxuan的博客-爱代码爱编程

文章目录 创建项目头部底部 创建项目 Vue中使用scss 头部 头部当中有两个按钮,然后根据设计稿可知,本留言墙中有4个按钮,所以可以自己封装一个按钮组件 按钮组件的博客 components/

基于springboot+vue的疫苗接种管理系统_曾几何时…的博客-爱代码爱编程

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端:SpringBoot 前端:Vue 数据库:MySQL5.7 数据库管理工具:Navicat 12 服务器:Tomcat8.5 开发软件:IDEA / MyEclipse 是否Maven项目:是 目录 一、项目简介 二、系统功能 三、系统项目截图 3.1前台首

gitee配置流水线实现自动打包vue_走进大山的孩子的博客-爱代码爱编程

1、任务编排: 第1步:创建一个构建任务,选择nodejs; 第2步:编写构建命令 # 设置NPM源,提升安装速度 npm config set registry https://registry.npmmirror.com cd dev && npm install && npm run build:prod 

vue实现模糊查询:filter()_陌一一的博客-爱代码爱编程

需求:在输入框里输入内容,包含相关内容的值被筛选出来; 图示: 最初的代码: <body> <div id="box"> <input type="text" @input="handleInput()" v-model="mytext"> <ul>

vue3项目的创建、入口文件、全局方法、生命周期函数、setup中的生命周期函数使用、data的函数方式_月光晒了很凉快的博客-爱代码爱编程

文章目录 1. 创建vue3项目1.1 基于webpack的工程创建1.2 通过vite来创建vue3项目vue3插件推荐 1.3 通过npm init vue@3创建项目 2. vue3入口文件3. vu

vue3 vuex_前端女孩的博客-爱代码爱编程

1、store配置 import {createStore} from 'vuex' const storeData={ state:() => ({}), getters:{},

java计算机毕业设计vue基层社区管理服务网源码+mysql数据库+系统+lw文档+部署_鸿源网络的博客-爱代码爱编程

java计算机毕业设计vue基层社区管理服务网源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue基层社区管理服务网源码+mysql数据库+系统+lw文档+部署 本源码技术栈: 项目架构:B/S架构 开发语言:Java语言 开发软件:idea eclipse 前端技术:Layui、HTML、CSS、JS、JQ

el-爱代码爱编程

先看需要实现的效果 这里有一级也有二级菜单,注意二级菜单的父目录(”选项设置“点击不会跳转,只是展开目录),然后点击去详情页,需要跳到一个隐藏的路由,不在菜单展示的路由 还有一点要注意,就是这里有两个router-vie

vue3中的computed和watch属性_vue3 computed @{user}-爱代码爱编程

文章目录 1. computed计算属性2. watch侦听器属性2.1 watchEffect2.2 watch 1. computed计算属性 简写写法(只实现了 get ): &l

vue表单修饰符:v-爱代码爱编程

表单修饰符有:lazy、number、trim;修饰符加在v-model后面;  lazy修饰符: v-model的作用是双向绑定表单,能获取到input输入框的值,而且是实时获取的,就是当你输入框里的值发生改变就会获取到;有时候我们不想实时获取输入框的值,想一段时间获取一次,就可以用这个修饰符;这个修饰符的作用是,绑在v-model上在input

小厂一面_小厂面试mysql-爱代码爱编程

1、Java面向对象 面向对象的三大基本特征: 封装继承多态 面向对象的编程思想就是把事物看作一个整体,从事物的特征(属性)和行为(方法)两个方面进行描述。面向对象的过程就是找对象、建立对象、使用对象、维护对象的关系

是js高级啊~_defineproperty syntax-爱代码爱编程

JavaScript高级 1.函数 1.1. this绑定规则优先级 隐式绑定的this 大于 默认的this显式绑定的this 大于 隐式绑定的thisnew绑定this 大于 隐式绑定的thisnew绑定的this

vue 动态表单优秀案例-爱代码爱编程

不同的下拉框 就会显示不同的表单,表单配置是灵活匹配的,还有就是 一定要知道都有哪些类型的数据做到兼容起来。 app.vue <template> <a-select v-model:

【vue】vue项目用qrcodejs2生成带log的二维码图片,vue生成二维码图片中间带log,自定义log-爱代码爱编程

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、安装qrcodejs2

vue基础编程(三)_vue嵌套路由公司简介-爱代码爱编程

案例要求 基于Vue Cli和嵌套路由技术,完成以下功能: 站点打开后会默认显示如图3.1所示的“关于公司”页面,单击图3.1页面上的“公司简介”链接,站点会显示如图3.2所示的“公司简介”页面,单击图3.1页面上的“公司治理”链接,站点会显示如图3.3所示的“公司治理”页面,单击以上任一页面上的“联系我们”链接,站点会显示如图3.3所示的“联系我

vue配置-爱代码爱编程

首先安装node.js 在cmd node -v查看 然后 cmd命令行执行 : npm install -g @vue/cli // 加-g是安装到全局 安装vue cli 安装vue cli 1 看一下 这是在cm