<template> <ul class="list"> <li class="item" v-for="item of letters" :key="item" :ref="item" @touchstart.prevent="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" @click="handleLetterClick" > {{item}} </li> </ul> </template> <script> export default { name: 'CityAlphabet', props: { cities: Object }, computed: { letters () { const letters = [] for (let i in this.cities) { letters.push(i) } return letters } }, data () { return { touchStatus: false, startY: 0, timer: null } }, updated () { this.startY = this.$refs['A'][0].offsetTop }, methods: { handleLetterClick (e) { this.$emit('change', e.target.innerText) }, handleTouchStart () { this.touchStatus = true }, handleTouchMove (e) { if (this.touchStatus) { if (this.timer) { clearTimeout(this.timer) } this.timer = setTimeout(() => { const touchY = e.touches[0].clientY - 79 const index = Math.floor((touchY - this.startY) / 20) if (index >= 0 && index < this.letters.length) { this.$emit('change', this.letters[index]) } }, 8) } }, handleTouchEnd () { this.touchStatus = false } } } </script> <style lang="stylus" scoped> @import '~styles/varibles.styl' .list display: flex flex-direction: column justify-content: center position: absolute top: 1.58rem right: 0 bottom: 0 width: .4rem .item line-height: .4rem text-align: center color: $bgColor </style>这是一下这段代码
时间: 2023-06-16 14:06:14 浏览: 46
这段代码是一个Vue组件,用于显示城市列表的首字母索引条。其中,通过props属性传入一个城市对象,通过computed属性计算出城市列表中的所有首字母,并通过v-for指令渲染到页面上。通过touchstart、touchmove和touchend事件处理滑动事件,并通过计算当前滑动位置来确定用户点击了哪个字母。最后,通过$emit方法触发一个自定义事件,通知父组件用户的选择。样式部分使用了Stylus预处理器,并使用了一些变量。
相关问题
<template> <div> <div class="menu"> <div class="menu-left"> <ul> <li class="menu-item" v-for="(menu, index) in menus" :key="index" :class="{ current: index === currentIndex }" @click="clickList(index)"> <a :href="'#'+menu.id" class="text">{{ menu.name }}</a> </li> </ul> </div> <div class="menu-right" ref="itemList"> <ul> <li class="cate" v-for="(menu, index1) in menus" :key="index1"> <h4 :id="menu.id" class="cate-title">{{ menu.name }}</h4> <ul class="cate-item"> <li v-for="(item, index2) in menu.sub" :key="index2"> <a href="#" class="cate-item-wrapper"> <div class="cate-item-img"> <img :src="item.image" alt /> </div> <span>{{ item.name }}</span> </a> </li> </ul> </li> </ul> </div> </div> </div> </template> <script>
这是一个Vue.js组件的代码,它实现了一个菜单栏的功能。菜单栏分为左右两部分,左边是菜单列表,点击菜单项可以切换右边的内容;右边是菜单内容,包含多个分类,每个分类又包含多个菜单项。这个组件中使用了v-for指令来遍历menus数组,根据currentIndex属性来判断当前选中的菜单项,并使用@click事件监听菜单项的点击。
在前端页面中 默认生成了数据如下<template> <div class="content"> <div class="row"> <div class="list"> <ul> <li>序号</li> <li>权限</li> <li>角色</li> <li>账号</li> <li>编辑</li> </ul> </div> </div> <div class="row"> <div class="lists"> <ul v-for="item in dataList" :key="item.id"> <li>{{ item.userid }}</li> <li>{{ item.authority }}</li> <li>{{ item.role }}</li> <li>{{ item.username }}</li> <li @click="ect">编辑</li> </ul> </div> </div> </div> </template> <script setup> import { ref, onMounted } from "vue"; import { getList } from "@/api/user"; const dataList = ref([]); onMounted(async () => { try { const response = await getList(); dataList.value = response.data; } catch (error) { console.error(error); } }); </script> 如何实现对数据修改并且不改变id
对数据进行修改需要在编辑按钮的点击事件中进行处理,可以在方法中接收当前被点击的数据对象,然后将其赋值给一个临时变量,进行修改后再将修改后的数据赋值回去。同时需要确保不改变数据的id。
下面是一个可能的实现方式:
<template>
<div class="content">
<div class="row">
<div class="list">
<ul>
<li>序号</li>
<li>权限</li>
<li>角色</li>
<li>账号</li>
<li>编辑</li>
</ul>
</div>
</div>
<div class="row">
<div class="lists">
<ul v-for="item in dataList" :key="item.id">
<li>{{ item.userid }}</li>
<li>{{ item.authority }}</li>
<li>{{ item.role }}</li>
<li>{{ item.username }}</li>
<li @click="edit(item)">编辑</li>
</ul>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getList } from "@/api/user";
const dataList = ref([]);
const editedData = ref(null);
onMounted(async () => {
try {
const response = await getList();
dataList.value = response.data;
} catch (error) {
console.error(error);
}
});
const edit = (data) => {
editedData.value = { ...data };
// 弹出编辑框,让用户修改数据
// ...
}
const save = () => {
// 将修改后的数据赋值回去
const index = dataList.value.findIndex((item) => item.id === editedData.value.id);
if (index >= 0) {
dataList.value[index] = { ...editedData.value };
}
// 隐藏编辑框
// ...
}
</script>
在 edit 方法中,我们将当前被点击的数据对象赋值给了 editedData 变量,这样在编辑框中修改数据时,就修改的是这个临时变量中的数据。在 save 方法中,我们根据 editedData 变量中的 id 找到原始数据中对应的索引,然后将修改后的数据赋值回去。这样就实现了对数据的修改而不改变 id 的要求。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
const activeIndex=Vue.ref(0);
// console.log(activeIndex.valuea);
function toggleActive(index){
if(activeIndex.value===index){
activeIndex.value=null;
}else{
activeIndex.value=index;
console.log(activeIndex);
console.log(activeIndex.value);
}
const lis =document.querySelectorAll(".clearfix li")
for(let i=0;i{{option.category_title}}
和
{{option2.subtitle}}
{{option2.title}}
{{option2.summary}}
{{option2.subtitle}}
{{option2.title}}
{{option2.summary}}
实现tab切换
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)