想要做网页？还得学会折腾元素哟。不怕，Vue这个框架帮你搞定，你的网站不仅好用还好看！接下来，我来教你如何使用它，肯定有用滴！
折叠标题折叠内容
1.1编写HTML和CSS代码
.collapse {
border: 1px solid #ccc;
}
.header {
background-color: #eee;
cursor: pointer;
padding: 10px;
}
.content {
padding: 10px;
}
先在HTML里安个会动来动去的玩意儿，然后用CSS给你打扮打扮，搭个框换个喜欢的颜色当背景之类的。别忘了搞个按钮，一点就可把内容藏起来或显现出来
1.2添加Vue组件
Vue.component('collapse', {
props: {
header: String,
content: String,
},
data() {
return {
show: false, // 初始状态为隐藏
};
},
methods: {
toggle() {
this.show = !this.show;
},
},
template: `
{{ header }}
{{ content }}
`,
});
咱们说说Vue里的 collapse 组件，这玩意儿主要是让头部和内容部分可以互动。首先，我们要用vue写个组件，给它起个名叫collapse。接着，搞个data()函数，设置一个叫show的变量，用来控制显示与否——开或关两种状态。最后，我们再加个toggle()函数，想看哪里，直接点哪里，这样就能随心所欲地切换了！当然，别忘了在template里面把HTML结构搭建好喔！
1.3在HTML中使用组件
来试试HTML中的“collapse”功能！只要在头部添个标题”header”，再加几段内容”content”，鼠标一点就行了！不仅可以轻松打开或关闭里面的内容，还特别好用。
二、拖拽排序效果
2.1编写HTML和CSS代码
想让网页变得轻松拖拽？那就让HTML把乱七八糟的信息整理好，用CSS装饰出好看的造型。接着，利用Flex网格画出直线，别忘记给每个元素加上灰底和边框。最后，你会发现当鼠标滑过那些小块后，小箭头就会换成抓取状，赶紧开始大规模移动！
{{ item.name }}
2.2添加Vue组件
咱们抓紧时间装这个sortable Vue组件！首先，在data()里搭个items数组，把要排序的内容放进去。然后，在mounted()里导入Sortable库，黏贴到根元素那边儿去。接下来，在template属性那儿码个HTML片段就行了。别忘了还要在onEnd()方法里调理下items数组，拖动完了就能瞧见效果咯~
.sortable {
display: flex;
flex-wrap: wrap;
margin: 20px 0;
}
.item {
background: #eaeaea;
border: 1px solid #ccc;
cursor: grab;
margin: 10px;
padding: 10px;
text-align: center;
width: 100px;
}
2.3在HTML中使用组件
原来HTML里有个叫‘sortable’的玩意儿可以拖拽！随心所欲摆放网页元素~就算页面乱套也别怕，用鼠标轻轻一点就搞定！
告诉你个Vue创意：如何玩转梦幻般的网页折叠和拖拽排序功能？无论你的项目大小，统统适用，这个超级实用教程帮到你。跟着步子做，一定行，适用于各种项目。让你的网页瞬间美观好用起来！
import Vue from 'vue';
Vue.component('sortable', {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' },
{ id: 5, name: 'Item 5' },
],
};
},
mounted() {
const sortable = new Sortable(this.$el, {
animation: 150,
onEnd: event => {
const item = this.items.splice(event.oldIndex, 1)[0];
this.items.splice(event.newIndex, 0, item);
},
});
},
template: `
{{ item.name }}
`,
});
。
评论0