今天写vue项目遇到需要判断所有input框是否都填写了内容，用到了一个every具体如下：

判断每一个input是否都填写了内容

<input :type="v.type" :placeholder="v.ts" v-model="v.md" />

   title: [
                { name: '姓名', ts: '请输入姓名', md: '', type: 'text' },
                { name: '年龄', ts: '请输入年龄', md: '', type: 'number' },
                { name: '性别', ts: '请输入性别', md: '', type: 'text' },
                { name: '手机', ts: '请输入手机号', md: '', type: 'text' },
            ]

  is() {
            return this.title.every(v => v.md !== '');//判断所有input是否都填写完成，都不=空返回true，一个为空返回false
        }

再通过判断的返回值进行一个操作，

        add() {
            if (this.is) {
                this.list.push(this.title.map(v => v.md));
                // 提交之后清空input内容
                this.title.forEach(v => v.md = '');
            } else {
                alert('请填写所有信息');
            }
        },

方法一：

import logo from './assets/logo.png'

方法二：

data(){
    return{
        logo:require("./assets/logo.png")
    }
}

1.引入子组件

import 自定义名字 from '子组件路径'

2.注册子组件

 components:{
            使用名字:引入子组件的自定义名字
        }

3.使用子组件

<name></name>

完整示例

<template>
    <div>
        <h1>当前组件</h1>
        <name></name>
    </div>
</template>

<script>
import HelloWord from './components/HelloWorld.vue'
    export default {
        components:{
            name:HelloWord
        }
    }
</script>

1.全局安装vue-cli

yarn global add @vue/cli

2.创建项目

vue create 名称

3.进入项目目录/启动项目

yarn serve

npm run serve

1.在state定义空数组

  state: {
    goodsList:[],//商品列表
  },

2.在 mutations里面写更新数据方法,payload 是传递过来的值，赋值给state下面的goodsList数组

  mutations: {
    // 存储商品
    addGoods(state,payload){
      state.goodsList=payload
    }
  },

3.吧获取到的数据传递给vuex 用this.$store.commit方法传递数据

// 把获取到的数据传递给vuex
        this.$store.commit('addGoods',res.data.data)

4.在从computed里面读取存vuex储的数据

    computed:{
        // 从vuex里面读取商品数据
        list(){
        return  this.$store.state.goodsList
        }
    }

1.创建子组件

components/ListUl.vue

2.父组件引入子组件

    components: {
        ListUl: () => import('@/components/ListUl.vue')
    },

3.父组件中使用

<list-ul></list-ul>

4.父组件传值

<list-ul :sum="list" ></list-ul>

5.子组件接收参数

export default {
    props: ["sum"], // 接收父组件传递的参数
}

6.子组件使用参数

    <ul>
        <li v-for="(v, i) in sum" :key="i">
        </li>
    </ul>

格式：年-月-日 时：分：秒

Vue.filter("datetime", (d) => {
    let d1 = new Date(d);
    let year = d1.getFullYear();//年
    let month = ("0" + (d1.getMonth() + 1)).slice(-2);//月
    let day = ("0" + d1.getDate()).slice(-2);//日
    let hour = ("0" + d1.getHours()).slice(-2);//时
    let minute = ("0" + d1.getMinutes()).slice(-2);//分
    let second = ("0" + d1.getSeconds()).slice(-2);//秒

    // 格式化输出
    return (
        year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
    );
});

在vue中使用echarts图表，窗口收缩图表不自适应解决办法

在绘制图表下添加：

  window.onresize=function(){
            myChart.resize()
        }

离开页面的时候销毁resize事件

destroyed(){
        window.onresize=null//组件销毁时去除resize事件
    }