今天完成的事情：
遇到的问题：
vue.js vue v-for循环遍历如何动态绑定id
<body>
<!-- 返回的按钮 -->
<div id="allli">
<ul v-for="(item,index) in sites">
<li>{{item.name}}</li>
<li :id="step(index)" >
<img :id="step(index)" src="circle.png" @click="cf(index)" />
</li>
</ul>
</div>
</body>
v-for="s in sites"和v-for="(item,index) in sites"都可以遍历出数据，但是前者显示不出Index
最重要的是，你选择了后者的话，必须是(item,index),如果是(s,index) in sites的形式就错了，虽然控制台不会报错，但是遍历不出数据
遵守vue的格式
正确格式如下：
<img :id="step(index)" src="circle.png" @click="cf(index)" />
错误格式如下
<img id="step({{index}})" src="circle.png" @click="cf({{index}})" />
使用vue完成侧边栏
html
<div id="body_left" class="body_left">
<ul class="body_left_list">
<li v-for='(item,index) in sites'>
<label class="body_left_list_label">
<p class="icon1"></p>
<span>{{item.name}}</span>
<i class="icon2"></i>
</label>
<ul>
<li v-for='(list,idx) in item.list'>
<label class="body_left_list_child_label">
<div :id="'left-btn'+(idx+1)">{{list.list}}</div>
</label>
</li>
</ul>
</li>
</ul>
</div>
:id="'left-btn'+(idx+1)" 设置id
vue.js
const left = {
data() {
return {
// movie: ['信息管理', 'Article管理', '人才管理', '推荐管理', '用户管理', '内容管理',],
// movies: ['信息列表', 'Article列表', '人才列表', '推荐列表', '用户列表', '内容列表',]
// { 'name': '信息管理', 'list': [{ 'name': '信息管理', 'list': ['信息列表'] }] },
sites: [
{ 'name': '信息管理', 'list': [{ 'name': '信息管理', 'list': '信息列表' }] },
{ 'name': 'Article管理', 'list': [{ 'name': 'Article管理', 'list': 'Article列表' }] },
{ 'name': '人才管理', 'list': [{ 'name': '人才管理', 'list': '人才列表' }] },
{ 'name': '推荐管理', 'list': [{ 'name': '推荐管理', 'list': '推荐列表' }] },
{ 'name': '用户管理', 'list': [{ 'name': '用户管理', 'list': '用户列表' }] },
{ 'name': '内容管理', 'list': [{ 'name': '内容管理', 'list': '内容列表' }] },
// { 'name': '信息管理', 'list': '信息列表' },
// { 'name': 'Article管理', 'list': 'Article列表' },
// { 'name': '人才管理', 'list': '人才列表' },
// { 'name': '推荐管理', 'list': '推荐列表' },
// { 'name': '用户管理', 'list': '用户列表' },
// { 'name': '内容管理', 'list': '内容列表' },
]
}
}
}
Vue.createApp(left).mount('#body_left')
使用vue做表格：
html
<table id="tab1" class="Article_list_page2_table">
<tr>
<td>id</td>
<td>名称</td>
<td>类型</td>
<td>发布时间</td>
<td>修改时间</td>
<td>发布者</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr v-for="a in infoww">
<td>{{a.data.id}}</td>
<td>{{a.data.name}}</td>
</tr>
js
const tab1 = {
data() {
return {
infoww: ['111']
}
},
mounted() {
axios
.get('/carrots-admin-ajax/a/article/search')
.then(response => (this.infoww = response,console.info("111111")))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
}
Vue.createApp(tab1).mount('#tab1')
返回列表
评论