标签：vue NO list item vue3 router data id

vue3开始

使用vue-cli3创建vue3项目

• 执行命令 vue create 项目名称

安装vue-router

• npm i vue-router

• 在src文件创建router=》index.js文件；

  • // src/router/index.js
    import { createRouter, createWebHashHistory } from 'vue-router'
    import Home from '../views/Home.vue'
    import MyPageOne from '../views/MyPageOne.vue'
    
    // createRouter 创建路由实例
    const router = createRouter({
      history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
      routes: [
        {
          path: '/',
          component: Home
        },
        {
            path: '/mypage',
            component: MyPageOne
          }
      ]
    })
    
    // 抛出路由实例, 在 main.js 中引用
    export default router
    

• main.js中引入

  • import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    
    const app = createApp(App) // 创建实例
    
    app.use(router)
    
    app.mount('#app')
    

• App.js中

  • <template>
    <!-- 和 vue-router3 一样，展示路由的组件的地方 -->
      <router-view />
    </template>
    
    <script>
    
    export default {
      name: 'App'
    }
    </script>
    

简易todolist

<template>
  <div>
      <div>
        <input v-model="inputValue" />
        <button @click="addList('ddd')">添加</button>
      </div>
      <div>
          <button @click="changeType('全部')">全部</button>
          <button @click="changeType('已完成')">已完成</button>
          <button @click="changeType('未完成')">未完成</button>
      </div>
      <div>
        <div v-for="item in list" :key="item.id">
            <template v-if="type === '全部'">
                <label @click="changeIs(item.id)">{{ item.title }}</label>
                <button @click="delectList(item.id)">删除</button>
            </template>
             <template v-if="type === '已完成' && item.isBool">
                 <label @click="changeIs(item.id)">{{ item.title }}</label>
                <button @click="delectList(item.id)">删除</button>
             </template>
             <template v-if="type === '未完成' && !item.isBool">
                 <label @click="changeIs(item.id)">{{ item.title }}</label>
                <button @click="delectList(item.id)">删除</button>
             </template>
        </div>
      </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
export default {
  name: '',
  setup() {
    console.log('1-开始创建组件-setup')
    const data = reactive({
        list:[
            {id:1,title:'oooo',isBool:true},
            {id:2,title:'xxxx',isBool:true},
        ],
        number:3,
        inputValue:'信息',
        type:'全部',
        addList: () => {
           data.list.push({id:data.number++,title:data.inputValue,isBool:true})
        },
        delectList: id =>{
            data.list =data.list.filter(item => item.id !== id)
        },
        changeIs: id =>{
            data.list.forEach(item =>{
                if(item.id === id){
                    item.isBool = !item.isBool;
                }
            })
            data.list = [...data.list]
        },
        changeType: type =>{
            data.type = type;
        }
    })
    onBeforeMount(() => {
      console.log('2.组件挂载页面之前执行----onBeforeMount')
    })
    onMounted(() => {
      console.log('3.-组件挂载到页面之后执行-------onMounted')
    })
    return {
      ...toRefs(data),
    }
  },
}

</script>

标签：vue,NO,list,item,vue3,router,data,id
来源： https://www.cnblogs.com/lixingqian/p/14883701.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。