首页 > 其他分享 >前端学习-vue学习007-计算属性+Class 与 Style 绑定

前端学习-vue学习007-计算属性+Class 与 Style 绑定

时间:2024-03-20 17:24:10浏览次数:38  
标签:Style vue todoList text value item 007 done id

官方教程链接

Class 与 Style 绑定

Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强

<span :class="{done:item.done}">{{ item.text }}</span>

如果item.done是true,以上代码实际为

<span :class="done">{{ item.text }}</span>

如果item.done是false,以上代码实际为

<span :class="">{{ item.text }}</span>

computed计算属性

计算属性会自动跟踪其计算中所使用的到的其他响应式状态,并将它们收集为自己的依赖。计算结果会被缓存,并只有在其依赖发生改变时才会被自动更新。

<template>
  <div class="todo">
    <input type="text" placeholder="new todo" v-model="newTodo">
    <button @click="addTodo">Add Todo</button>
    <ul>
      <li v-for="item in filteredTodos" :key="item.id">
        <input type="checkbox" v-model="item.done">
        <span :class="{done:item.done}">{{ item.text }}</span>
        <button @click="delTodo(item)">X</button>
      </li>
    </ul>
    <button @click="hideCompleted = !hideCompleted">{{ hideCompleted ? 'show all' : 'hide completed'}}</button>
  </div>
</template>

<script setup lang="ts">
  import { reactive,ref,computed } from "vue";
  let id = 0
  let newTodo = ref()
  let todoList = ref(
    [
      {id:id++,text:"Learn HTML",done:true},
      {id:id++,text:"Learn CSS",done:false},
      {id:id++,text:"Learn VUE",done:true},
    ]
  )
  let hideCompleted = ref(false)
  let isHide = ref(false)
  function addTodo() {
    todoList.value.push({id:id++,text:newTodo.value,done:false})
    newTodo.value = ''
  }
  function delTodo(todo) {
    todoList.value = todoList.value.filter((t) => t !== todo)
  }
  const filteredTodos = computed(() => {
    return hideCompleted.value ? todoList.value.filter((t) => !t.done) : todoList.value
  })
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>

标签:Style,vue,todoList,text,value,item,007,done,id
From: https://www.cnblogs.com/ayubene/p/18056173

相关文章

  • vue2 vue-print-nb
    一、安装插件1、npminstallvue-print-nb--save二、引入Vue项目在main.js中添加--全局挂载  importPrintfrom'vue-print-nb'  Vue.use(Print) 三、前端代码一、操作项中的打印按钮<spantitle="打印"><svg-iconicon-class="printer"class=&quo......
  • pinia——vue3的状态管理工具
    简介Pinia是Vue的专属状态管理库,它允许你跨组件或页面共享状态。主要优点Vue2和Vue3都支持,这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。pinia中只有state、getter、action,抛弃了Vuex中的Mutation,Vuex中mutation一直都不太受小伙伴们的待见,pinia直接抛弃它了,这无疑......
  • VsCode中高效书写Vue3代码的插件
    Vue-Official(原Volar)就是原先的Volar,现已弃用。Vue-Official提供的功能:语法高亮:Vue-Official扩展可以为Vue单文件组件(.vue文件)中的HTML、CSS和JavaScript部分提供语法高亮,使代码更易于阅读和编写。代码片段:Vue-Official扩展提供了丰富的Vue.js相关的......
  • 【Vue3】组件通信以及各种方式的对比
    方式一:props「父」向「子」组件发送数据父组件:定义需要传递给子组件的数据,并使用v-bind指令将其绑定到子组件的props上。<template><child-component:message="parentMessage"/></template><scriptsetup>importChildComponentfrom'./ChildComponent.......
  • vue3 项目接入keycloak
    之前都是vue2项目接入keycloak,网上表较多资料参考,vue3得比较少记录一下。这个前端项目是jetlinks社区版。引入了 dsb-norge/vue-keycloak-js插件, https://github.com/dsb-norge/vue-keycloak-js,还是要看官方得文档、示例。1.官方提供得示例比较全,我需要得是vue3typescri......
  • vue的vite、vue-cli、create-vue的区别
     脚手架:创建项目,选择性安装需要的插件,指定统一的风格,生成demo。构建项目:建立项目的运行环境,需要手动安装插件。 vue-cli【官网:https://cli.vuejs.org/zh/index.html】VueCLI的包名称由vue-cli改成了@vue/clivue-cli是Vue早期推出的一款脚手架,使用webpack......
  • 基于Java的校园电商物流云平台(Vue.js+SpringBoot)
    目录一、摘要1.1项目介绍1.2项目录屏二、功能模块2.1数据中心模块2.2商品数据模块2.3快递公司模块2.4物流订单模块三、系统设计3.1用例设计3.2数据库设计3.2.1商品表3.2.2快递公司表3.2.3物流订单表四、系统展示五、核心代码5.1查询商品5.2查询快递公......
  • 基于Java的医院门诊预约挂号系统(Vue.js+SpringBoot)
    目录一、摘要1.1项目介绍1.2项目录屏二、功能模块2.1功能性需求2.1.1数据中心模块2.1.2科室医生档案模块2.1.3预约挂号模块2.1.4医院时政模块2.2可行性分析2.2.1可靠性2.2.2易用性2.2.3维护性三、数据库设计3.1用户表3.2科室档案表3.3医生档案表3.4......
  • 基于Java的考研专业课程管理系统(Vue.js+SpringBoot)
    目录一、摘要1.1项目介绍1.2项目录屏二、功能模块2.1数据中心模块2.2考研高校模块2.3高校教师管理模块2.4考研专业模块2.5考研政策模块三、系统设计3.1用例设计3.2数据库设计3.2.1考研高校表3.2.2高校教师表3.2.3考研专业表3.2.4考研政策表四、系统展......
  • java毕设安卓基于vue的历史博物馆APP(开题+源码)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展,移动互联网已经成为现代人生活不可或缺的一部分。智能手机普及率的提升,使得移动应用(APP)成为连接用户与服务的重要桥梁。历史......