</div> <ul class="core"> <li v-for="(item, index) in items" :key="index"> <div class="info"> <span class="category">{{ item.category }}</span> <span class="field">{{ item.field1 }}</span> <span class="field">{{ item.field2 }}</span> </div> <div class="progress-bar"> <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> <div class="progress" :style="{ width: item.progress + '%' }"></div> <span class="field">{{ item.field2 }}</span> </div> </li> </ul>怎么实现info和progressbar在不同的两行
时间: 2024-01-03 18:37:48 浏览: 26
要实现info和progressbar在不同的两行,可以将它们分别放置在不同的div元素中,并设置这两个div元素的display属性为"block",这样它们就会自动换行显示。下面是修改后的代码示例:
```html
<div class="info">
<span class="category">{{ item.category }}</span>
<span class="field">{{ item.field1 }}</span>
<span class="field">{{ item.field2 }}</span>
</div>
<div class="progress-bar">
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
<div class="progress" :style="{ width: item.progress + '%' }"></div>
<span class="field">{{ item.field2 }}</span>
</div>
```
通过将info和progressbar分别放置在两个div元素中,它们将会在不同的行显示。
相关问题
在前端页面中 默认生成了数据如下<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 的要求。
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<lis.length; i++){ if(i!==index){ lis[i].classList.remove("noww"); } } }和<li v-for="(option,index) in conto" v-bind:key="index" :class="{'noww':activeIndex === index}" @click="toggleActive(index)" >{{option.category_title}} </li>和<div class="cont" v-show="activeIndex === 0" > <ul> <li v-for="option2 in cont" v-bind:key="option2" :class="parseInt(option2.stock) ===1?'olik':''" > <a :href="option2.source" target="_blank"> <div class="contimg" > <img :src="option2.bigpic" alt="{{option2.title}}"> </div> <div class="context"> <span> <img :src="option2.smallpic" alt="">{{option2.subtitle}}</span> <h4><span>{{option2.title}}</span></h4> <p>{{option2.summary}} </p> </div> </a> <!-- <div class="difficulty"> <div class="difficultbox"> <div class="modulus"> <div class="tit">难度系数</div> <div class="starsbox"> <div class="starsimg"><img src="../images/starsolik.png"></div> </div> </div> <div class="honor"> <div class="tts xuefen"><img src="../images/olikdegree.png"></div> <div class="tts certificate"><img src="../images/olikdegree2.png"></div> </div> </div> </div> --> </li> </ul> </div> <div class="cont" v-show="activeIndex.value === 1" > <ul> <li v-for="option2 in cont2" v-bind:key="option2" :class="parseInt(option2.stock) ===1?'olik':''" > <a :href="option2.source" target="_blank"> <div class="contimg" > <img :src="option2.bigpic" alt="{{option2.title}}"> </div> <div class="context"> <span> <img :src="option2.smallpic" alt="">{{option2.subtitle}}</span> <h4><span>{{option2.title}}</span></h4> <p>{{option2.summary}} </p> </div> </a> </li> </ul> </div>实现tab切换
要实现tab切换,你可以使用Vue的响应式数据和v-show指令。首先,你需要定义一个活动索引(activeIndex)的响应式变量,初始值为0。然后,你可以使用v-for指令循环渲染tab选项,并绑定点击事件。在点击事件中,你可以根据索引值切换活动索引的值,并根据活动索引的值来显示对应的内容。
下面是修改后的代码:
```html
<template>
<div>
<ul>
<li v-for="(option, index) in conto" :key="index" :class="{'noww': activeIndex === index}" @click="toggleActive(index)">
{{ option.category_title }}
</li>
</ul>
<div class="cont" v-show="activeIndex === 0">
<ul>
<li v-for="option2 in cont" :key="option2" :class="parseInt(option2.stock) === 1 ? 'olik' : ''">
<a :href="option2.source" target="_blank">
<div class="contimg">
<img :src="option2.bigpic" alt="{{option2.title}}">
</div>
<div class="context">
<span>
<img :src="option2.smallpic" alt="">{{option2.subtitle}}
</span>
<h4><span>{{option2.title}}</span></h4>
<p>{{option2.summary}}</p>
</div>
</a>
</li>
</ul>
</div>
<div class="cont" v-show="activeIndex === 1">
<ul>
<li v-for="option2 in cont2" :key="option2" :class="parseInt(option2.stock) === 1 ? 'olik' : ''">
<a :href="option2.source" target="_blank">
<div class="contimg">
<img :src="option2.bigpic" alt="{{option2.title}}">
</div>
<div class="context">
<span>
<img :src="option2.smallpic" alt="">{{option2.subtitle}}
</span>
<h4><span>{{option2.title}}</span></h4>
<p>{{option2.summary}}
</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const activeIndex = ref(0);
function toggleActive(index) {
if (activeIndex.value === index) {
activeIndex.value = null;
} else {
activeIndex.value = index;
}
}
return {
activeIndex,
toggleActive,
};
},
};
</script>
```
在上述代码中,使用了Vue的Composition API(setup函数)来定义activeIndex的响应式变量和toggleActive函数。activeIndex用于控制显示哪个内容,toggleActive用于切换活动索引的值。
请注意,你需要根据实际情况修改其他部分的代码,比如数据绑定和样式类名的逻辑。