相思资源网 Design By www.200059.com

新建组件todoList.vue,在App.vue中引入

import TodoList from "./components/todoList";
export default {
 name: 'app',
 components: {
  TodoList
 }
}
<template>
 <div id="app">
  <h1>TO DO LIST !</h1>
  <todo-list></todo-list>
 </div>
</template>

 三处缺一不可,第一处引入文件,第二处注册组件,第三处声明组件位置

由于html中不区分大小写,所以驼峰命名方式中的大写变为-,即第三处中写成todo-list,不理解的可以动手实验一下!

todoList.vue中data如下:

data () {
   return{
     items:[
      {
        label:"homework",
        finish:false
      },
      {
        label:"run",
        finish:false
      },
      {
        label:"drink water",
        finish:false
      }
     ]
   }
 }

 有三件事情:homework、run、drink water,通过v-for渲染:

<ul>
  <li v-for="item in items">{{item.label}}</li>
</ul>

列表展示完成,现在添加点击列表,改变列表样式,标记为完成!

<ul>
  <li v-for="item in items" v-on:click="done(item)" v-bind:class="{done:item.finish}">{{item.label}}</li>
</ul>

添加v-on:click,v-bind:class

v-on:click=”done(item)”表示点击执行done方法,item作为参数。

v-bind:class=”{done:item.finish}”表示,如果item.finish==true时,class=“done”。

methods:{
  done:function (item) {
    item.finish = !item.finish
  }
 }
.done{
  color: red;
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
vue.js,todoList,vue,todoList

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“vue.js实例todoList项目”

暂无vue.js实例todoList项目的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。