vue3版本学习

2023-12-13 07:12:16

1,响应式ref或者reactive

const? aa = ref('hello')
const bb = reactive({
? ? aa: 'hello',
? ? ss: 'workd'
})

2,计算属性

响应式属性经过计算得到的值(ref),放到模板中,只会随着响应式author.books属性变化而变化

const? autor = ref(['john'])

const? getBook = computed(()=>{
return author.length?"yes":"no"
})

如果不用computed包裹,也会随着响应式属性变化而变化,但是不只是author.books属性

修改计算属性:
const getBook = computed(()=>{
?get(){
? ?return autor
}
set(val){ author.value= val}
})

3,类和样式绑定

即:动态修改class属性值

<div :class="{action: true}"></div>

相当于:<div class="action"></div>

可以绑定数组

const actionclass= ref('action')
<div :class="[actionclass]"></div>

动态绑定样式:
<div :style="{ fontSize: large}"></div>

4,类和样式绑定之父子组件class传递

只有一个根元素:
Component :<p></p>
<Component class="good" />
相当于:<p class="good"></p>

有多个根元素:
Component:?
? <p></p>
<div :class="$attrs.class" ></div>

<Component class="good" />
相当于:
?<p></p>
<div? class="good"?></div>

5,条件渲染v-if和v-show

<div v-if = "show" >看见我了!</div>
<div v-else>看不见了!</div>

v-show和v-if一样,不过v-show元素还是存在文档中,只是display:none

6,v-for

<div v-for="(item,index) in items"? :key={{item.id}}>{{item}}</div>
item可以是数组、对象,数字

7,v-model
<input v-model="text" />

相当于:
<input :value="text"? @input="event=>text=e.target.val" >

文章来源:https://blog.csdn.net/kalinux/article/details/134843652
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。