网站首页psd下载,wordpress搭建注册会员,做网站与做游戏那个好,网页版微信文件保存在哪里在Vue.js中#xff0c;组件是可复用的Vue实例#xff0c;它可以封装特定的功能和界面#xff0c;并能在应用程序中多次使用。组件允许您将应用程序拆分为多个小的、独立的部分#xff0c;每个部分都有自己的模板、逻辑和样式。 之前处理多个用户数据时#xff0c;每个用户…在Vue.js中组件是可复用的Vue实例它可以封装特定的功能和界面并能在应用程序中多次使用。组件允许您将应用程序拆分为多个小的、独立的部分每个部分都有自己的模板、逻辑和样式。 之前处理多个用户数据时每个用户都有一个show detail按键使用v-for遍历所有数据后需要给每个用户的how detail按键加上不同的data的返回值以及在按下按键时需要判断是哪个用户的操作不然的话按下按钮后所有用户的detail都会被展示。当用户越来越多时这样做很麻烦使用组件便可以解决这一问题这样每个用户都有自己独立的逻辑。
const app Vue.createApp({data() {return {friends: [{id: manuel,name: Manuel Lorenz,phone: 01234 5678 991,email: manuellocalhost.com,},{id: julie,name: Julie Jones,phone: 09876 543 221,email: julielocalhost.com,},],}},
})app.component(friend-contact, {template: lih2{{ friend.name }}/h2button clicktoggleDetails(){{ detailsAreVisible ? Hide : Show }} Details/buttonul v-ifdetailsAreVisiblelistrongPhone:/strong {{ friend.phone }}/lilistrongEmail:/strong {{ friend.email }}/li/ul/li,data() {return {detailsAreVisible: false,stage: Hide,friend: {id: manuel,name: Manuel Lorenzo,phone: 01234 5678 991,email: manuellocalhost.com,},}},methods: {toggleDetails() {this.detailsAreVisible !this.detailsAreVisible},},
})app.mount(#app)
如上所示:将原来的li v-forfriend in friends :keyfriend.id中的属性删除其余html部分放入template便完成了一个组件。
