“我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛”

兔子新春诗句

将诗句放到vue3的列表中，使用for去遍历List.

想要实现的功能

- [添加诗句 ]

- [诗句遍历]

代码

添加

function add() {
    const obj = {
      content: title.value,
      
    };
    todoList.value.push(obj);
    title.value = "";
  }

学到的知识

vue3

可以在标签编写三元运算来进行类的多重表现

<span :class="[item.done ? 'inactive' : 'active']">
          {{ item.content }}
</span>

图片加载可以图片上传图床，在style直接编写风格代码

<img src="https://img1.imgtp.com/2023/01/27/ShZX4im0.png" style="width:30px;top:209px">

诗句添加

<input type="text" @keypress.enter="add" v-model="title" /> 通过@keypress.enter可以在用户使用回车时触发相应方法add,v-model="title"与title数据进行绑定，title内容自动呈现在input输入框中 let title = ref(""); add的方法逻辑，定义obj变量，把输入的title放进去，然后在todoList列表中push那个变量，最后将title清空。

 const obj = {
      content: title.value,
      
    };
    todoList.value.push(obj);
    title.value = ""; 

这里push的是列表，不是单单的字符串，如果后期想加其他字符串，会比较方便。

代码

<template>
  <div>
    <img src="https://pic.imgdb.cn/item/63c8e7abbe43e0d30e6808d1.png">
  </div>
  <div class="title">
    <input type="text" @keypress.enter="add" v-model="title" />
    <button @click="add">添加诗句</button>
  </div>
  <div class="content">
    <transition-group name="flip-list" tag="ul">
      <li v-for="(item, index) in todoList" :key="item.content">
      
        <span :class="[item.done ? 'inactive' : 'active']">
          {{ item.content }}
        </span>
        <span  >
          <img src="https://img1.imgtp.com/2023/01/27/ShZX4im0.png" style="width:30px;top:209px">
       
        </span>
      </li>
    </transition-group>
  </div>



</template>

<script setup>
import { ref, reactive } from "vue";
function useTodos() {
  let title = ref("");
  let todoList = ref([
    {
      content: "光分顾兔一毫芒，遍洒春分翰墨场。",
      
    },
    {
      content: "偎花开兔径，向壁印狐踪。",
     
    },
     {
      content: "白兔捣药成，问言与谁餐？",
     
    },
     {
      content: "虾蟆故堪浴水，问云何玉兔解沉浮？",
     
    },
     {
      content: "兔丝固无情，随风任倾倒。",
     
    },
     {
      content: "箭逐云鸿落，鹰随月兔飞。",
       
    },
     {
      content: "兔丝固无情，随风任倾倒。",
      
    },
     {
      content: "兔丝固无情，随风任倾倒。",
     
    }
  ]);
  function add() {
    const obj = {
      content: title.value,
      
    };
    todoList.value.push(obj);
    title.value = "";
  }
 
 
  return { title, todoList, add };
}


let { title, todoList, add } = useTodos();

const { animate ,enter } = useAnimation();

function useAnimation() {
  let animate = reactive({
    show: false,
    el: null
  });
  const dustbin = {
    el: null,
    pos: [],
    init(queryStr) {
      this.el = document.querySelector(queryStr);
      this.getPos();
    },
    getPos() {
      const { left, top } = this.el.getBoundingClientRect();
      this.pos[0] = left;
      this.pos[1] = top;
    }
  };


 
 
  return { animate };
}
</script>

<style lang="scss" scoped>
  @keyframes forward {
  0% {left: 0; }
  50% {left: 200px}
  100% {left: 400px}
}
  div{
     
    animate:forward 4s;
    img{
   width:80px;
  }
  }
.active {
  color: v-bind(color);
}

.content{
  color:red; 
 
}
</style>

最后祝大家新春大吉
With best wishes to you for a happy New Year! 开年少bug