Day1
实现TodoList
（虽然早在半年前都做过一遍了，很长时间也没用忘得差不多了，于是再重新系统地学一遍）
1.写vue不要忘记加setup：<script setup>
2.v-for="(item,index) in list"
其中的item和index的位置不能写错
3.v-bind和v-model的区别：v-bind是单向绑定，v-model是双向绑定。
4.原本用的是var变量，但是为了实时渲染，
用的是const list = ref([])
5.删除数组中的某处索引splice(index,i)表示从index开始的i个数删掉
6.可以发现计算属性和函数可以实现完全一样的功能。但是计算属性基于依赖的存储属性的值变化而重新计算，结果会被缓存，但是函数是每次都会都会重新执行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <script setup>
import { computed } from '@vue/reactivity';
import { ref } from 'vue';
const list = ref([])
const count = ref(0)
var content0 = ""
const newTodo = ref('')
function addTodo () {
console.log("list:"+list.value)
console.log("content:"+newTodo.value)
list.value.push(newTodo.value)
count.value++;
console.log("count:"+count)
console.log("list after:"+list.value)
}
function removeTodo(index) {
console.log("index:"+index);
list.value.splice(index,1)
}
function type() {
console.log("count:"+count.value)
return count.value > 10 ? 2 : 0
}
</script>
<template>
<span>TodoList</span>
<input v-model="newTodo" placeholder="input.."/>
<button @click="addTodo">add</button>
<br/>
<ul>
<li v-for="(item,index) in list">
{{item}}<button @click="removeTodo(index)">remove</button>
</li>
</ul>
<p>
{{type()}}
</p>
</template>
|