- 定义一个基本类型变量a，在获取值需要a.value,如果想要去除.value
let a=$ref(0) 目前还在内侧阶段
2.computed 计算属性的使用
- 计算属性的计算函数应只做计算而没有任何其他的副作用
3.class 样式动态绑定的方法
- 方法1：（绑定对象）
const isActive = ref(true)
<div :class="{ active: isActive }"></div>
- 方法2：（绑定数组）
const errorClass = ref('text-danger')
<div :class="[activeClass, errorClass]"></div>
- 方法3：（组件中使用）
<!-- 子组件模板 -->
<p class="foo bar">Hi!</p>
<!-- 在使用组件时 -->
<MyComponent class="baz boo" />
- 方法：（绑定内联样式）
const activeColor = ref('red')
const fontSize = ref(30)
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
- 在不改变原始数据的情况下，对数据进行排序、过滤展示。
const numbers = ref([1, 2, 3, 4, 5])
const evenNumbers = computed(() => {
return numbers.value.filter((n) => n % 2 === 0)
})
<li v-for="n in evenNumbers">{{ n }}</li>
注意：在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)，你可以使用以下方法
const sets = ref([
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10]
])
function even(numbers) {
return numbers.filter((number) => number % 2 === 0)
}
<ul v-for="numbers in sets">
<li v-for="n in even(numbers)">{{ n }}</li>
</ul>
