vue for和if,vue中v-if用法
这篇文章主要介绍了某视频剪辑软件中迭代和控制显示一起使用之使用计算的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
目录
版本目标效果说明解决方法核心代码片段汽车。某视频剪辑软件
版本
vue 2.9.6
元素界面：2.15.6
目标效果
说明
在vue 2.x中，在一个元素上同时使用控制显示和迭代时，v-for会优先作用
解决方法
选择性地渲染列表，例如根据某个特定属性（类别)来决定不同展示渲染，使用计算属性计算使用模板占位，将循环放在模板中，v-if作用于元素，此方法脚本中不用定义计算方法，见https://www.jb51.net/article/247179.htm
核心代码片段
# html
.
埃尔分隔线内容-位置=左奥迪/el-divider
El-link type= primary target= _ blank v-for=(item，index)in links 0 :key= index :href= item。URL rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随
El-button type= primary { item。name } }/El-button
/el-link
.
#脚本
.
计算值：{
links0: function() {
归还这个。链接。过滤器((项目)={
返回item.category===0
})
},
links1: function() {
归还这个。链接。过滤器((项目)={
返回item.category===1
})
},
links2: function() {
归还这个。链接。过滤器((项目)={
返回item.category===2
})
}
},
Car.vue
模板
差异
el-row
el-col :span=24
El-form:inline= true class= user-search
埃尔-表单-项目
El-button size= small type= primary icon= El-icon-plus @ click= handleEdit() plain添加链接/el-button
/El-表单-项目
/el格式
差异
埃尔分隔线内容-位置=左奥迪/el-divider
El-link type= primary target= _ blank v-for=(item，index)in links 0 :key= index :href= item。URL rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随
El-button type= primary { item。name } }/El-button
/el-link
埃尔分隔线内容-位置=左奔驰/el-divider
El-link type= primary target= _ blank v-for=(item，index)in links 1 :key= index :href= item。URL rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随
El-button type= primary { item。name } }/El-button
/el-link
埃尔分隔线内容-位置=左宝马/el-divider
El-link type= primary target= _ blank v-for=(item，index)in links 2 :key= index :href= item。URL rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随
El-button type= primary { item。name } }/El-button
/el-link
/div
！-添加界面-
El-dialog:title= title :可见。sync= edit form visible width= 30% @ click=关闭对话框
El-form label-width= 120 px :model= edit form :rules= rules ref= edit form
El-表单-项目标签=链接名称prop=name
El-input size= small v-model= edit form。name 自动完成= off placeholder=请输入链接名称/el-input
/El-表单-项目
El-表单-项目标签=链接地址prop=url
El-input size= small v-model= edit form。URL“自动完成=”off“占位符=”请输入链接地址/el-input
/El-表单-项目
/el格式
div slot=footer class=对话框-页脚
El-button size= small @ click=关闭对话框取消/el-button
El-button size= small type= primary :loading= loading class= title @ click= submit form( edit form )保存/el-button
/div
/el-dialog
/el-col
/el-row
/div
/模板
脚本
从导入{ getLink，saveLink }././api/userMG
导出默认值{
data() {
返回{
链接：[],
loading: false，//显示加载
editFormVisible: false，//控制添加页面显示与隐藏
标题： 添加链接，
编辑形式：{
名称： ,
url:" "
},
//规则表单验证
规则：{
名称：[{要求：真，消息： 请输入链接名称，触发器：模糊 }],
url: [{ required: true，message:请输入链接地址，触发器：模糊 }]
},
}
},
计算值：{
//通过根据种类属性来不同显示
links0: function() {
归还这个。链接。过滤器((项目)={
返回item.category===0
})
},
links1: function() {
归还这个。链接。过滤器((项目)={
返回item.category===1
})
},
links2: function() {
归还这个。链接。过滤器((项目)={
返回item.category===2
})
}
},
已创建(){
//获取链接
this.getdata()
},
//这下面的方法只有被调用才会被执行
方法：{
//获取链接
getdata() {
this.loading=true
getLink().然后((响应)={
this.loading=false
console.log(response.data)
this.links=response.data
}).接住(错误={
console.log(错误)
})
},
//添加页面方法
handleEdit: function() {
this.editFormVisible=true
this.title=添加链接，
this.editForm.name= ，
this.editForm.url=
},
//添加保存页面方法
submitForm(editData) {
这个refs[editData].验证（有效={
如果（有效){
saveLink(this.editForm).然后(响应={
this.editFormVisible=false
this.loading=false
//if (response.success)
this.getdata()
这个消息({
类型："成功",
消息： 链接添加成功
})
}).接住(错误={
this.editFormVisible=false
this.loading=false
//控制台。日志(错误。回应。数据[ URL ][0])
//控制台。日志(错误。回应。状态)
//这个message.error(链接添加失败，请稍后再试)
如果(错误。回应。状态==400){
这个$消息。错误(错误。回应。数据[ URL ][0]如：http://xxx或https://XXX’)
}否则{
这个message.error(链接添加失败，请稍后再试)
}
})
}
})
},
//关闭添加链接窗口
closeDialog() {
this.editFormVisible=false
}
}
}
/脚本
风格
/* .el-row {
页边距-顶部：10px
} */。el-link {
右边距：5px
}
/风格
到此这篇关于某视频剪辑软件中迭代和控制显示一起使用之使用计算的文章就介绍到这了，更多相关vuev-for和控制显示一起使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。