zoukankan      html  css  js  c++  java
  • (尚026)Vue_案例_动态初始化显示(尚025)

    (1).当前页面需要变化什么样的数据?

    答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型'

    (2).数组todos究竟放在哪个组件中保存?

    看某个组件需要还是某些组件需要;分析各个组件都需要,故放在父组件中App.vue

    (3)在App.vue组件中初始化数据,

    <1>.先摆好结构

    <2>.写入数组数据

     <3>.将组件交给<TodoList/>使用

    实现初始化显示<TodoList :todos="todos"/>

    <4>.TodoList中声明接收属性

     <5>.在TodoList.vue中声明接收属性(ctrl+鼠标左键跳转)

     <6>.指定属性名和属性类型

     <7>.将TodoList.vue中的li和样式,抽取到TodoItem.vue组件

    <8>.在TodoList.vue中使用TodoItem.vue 

    传递给TodoItem.vue两个属性

    :key="index" :todo="todo" :index="index"

     <9>.在TodoItem.vue中声明接收属性

    <10>.页面显示数据

     

     注意如果不显示数据:F12,首先看是否报错,然后看数据显示vue

    ===============================================================

  • 相关阅读:
    sql mysql
    sql练习
    re正则表达式
    《大道至简 第二章》读后感
    读《大道至简:编程的精义》有感
    爬取汽车之家新闻图片的python爬虫代码
    Linux系统封装成iso文件
    使用Zabbix进行IPMI监控
    zabbix支持的主要监控方式
    python虚拟环境搭建
  • 原文地址:https://www.cnblogs.com/curedfisher/p/12047687.html
Copyright © 2011-2022 走看看