vue3版本学习
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" >
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!