(案例+截图 )vue绑定 :data-zidingyi="response.false" 之后,页面DOM 不显示


正确的代码:

<section v-for="(item,index) in res.data" :key="index" :class="'buleteam hidden buleteam _'+item.id" :id="'buleteam _'+item.id" :data-item-id="item.id" :data-has-collect="''+item.isCollect">...// 上文代码// :data-has-collect="''+item.isCollect" // 注意上一句格式:是拼接形式  ''+item.isCollect// 按照这种拼接方式书写代码,才会生效,否则一旦false就不渲染且不显示dom元素了...
</section>

截图:

(省略,博主自留)


注意 · 说明:

  • // 上文代码
  • // :data-has-collect=" ''+item.isCollect "
  • // 注意上一句格式:是拼接形式 ''+item.isCollect
  • // 按照这种拼接方式书写代码,才会生效,否则一旦false就不渲染且不显示dom元素了

以上就是关于“ vue绑定自定义属性(属性值:false),DOM不显示问题 ” 的全部内容。

vue绑定自定义属性(属性值:false),DOM不显示问题相关推荐

  1. 通过Vue绑定zoom样式值实现禁止页面放大缩小

    思路:禁止浏览器通过CTRL+与CTRL-放大与缩小页面比例,我们可以通过当页面放大(会触发window.onresize事件)时控制样式属性zoom按相应比例缩小(同理缩小窗体时zoom放大)来实现 ...

  2. 难点三!!!Vue绑定class属性时无效

    class后面绑定的值应该以{}方式呈现 错误写法: <ul><li v-for="(item,i) in cityList" @click='select(i) ...

  3. Vue学习2 - 事件处理以及绑定、事件、遍历、判断、元素显示、DOM属性的绑定、comput计算属性值

    文章目录 1. 事件处理.以及Vue生命周期函数.事件描述符 1.1 基本用法 1.2 获取事件对象,阻止默认行为.事件冒泡行为.事件描述符 2. for循环 2.1 基本数据类型数组的遍历 2.2 ...

  4. Vue.js绑定class属性

    绑定class属性的格式是   v-bind:class = "语句",  可以缩写为  :class ="语句" .class属性是可以有多个的,在" ...

  5. html中offsetleft属性,JavaScript offsetLeft属性值简介说明

    摘要: 下文讲述dom对象之offsetLeft属性值的功能简介说明,如下所示: DOM之offsetLeft属性值说明 DOM之offsetLeft属性值功能说明: offsetLeft属性值用于返 ...

  6. VUE基本语法1-插值 属性绑定

    .1 插值绑定 插值绑定是Vue中最常见.最基本的语法,绑定的内容主要有文本插值和HTML插值两种 文本插值 文本插值的方式十分简单,只要用双大括号(Mustache语法)将要绑定的变量.值.表达式括 ...

  7. vue双向绑定不生效、对象中的属性值发生改变页面不会重新渲染问题解决办法

    文章目录 vue双向绑定原理 方法一 增加一个基本类型的变量 方法二 使用整体对象替换 方法三 使用vue文档提供的方法 vue双向绑定原理 vue深入式响应原理,当我们在data中声明变量对象,Vu ...

  8. element 往node里面增加属性值_【Vue原理】Compile - 源码版 之 Parse 属性解析

    写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧 研究基于 Vue版本 [2.5.17] 如果你觉得排版难 ...

  9. vue绑定html的class属性的方法

    一.对象语法绑定class属性 class的属性代码如下 <style type="text/css">.red{color: red;width: 100px;hei ...

最新文章

  1. 第五章 python中正则表达式的使用
  2. sharepoint 2010学习资源汇总
  3. 正则表达式提取字符串内所有的img标签下的src路径
  4. java多个类调用_JAVA问题总结之15-多个类之间的调用
  5. 2种继承方式学习笔记
  6. android gradle 1.5.0,Cordova build – 无法解析com.android.tools.build:gradle:1.5.0
  7. 【Angular 4】响应式编程
  8. WebService之Axis2快速入门(2): 传递复合类型的数据
  9. java连接oracle数据库jdbc
  10. 企业微信小程序可用存储空间不足_微信小程序为什么能帮助企业商家引流?
  11. word更改字距调整,让文章更具美感!
  12. 软件测试(七):自动化测试、安全测试、性能测试
  13. 美剧深度扫盲:有线电视台之风起云涌--之一(转载)
  14. 关于MAC安装yarn
  15. win10 u盘 修复计算机,不用u盘修复bootmgrwin10方法
  16. Geronimo入门与进阶
  17. 原创 | 2020年数据科学与大数据技术专业填报指南(附院校及专业介绍)
  18. JZOJ5454. 【NOIP2017提高A组冲刺11.5】仔细的检查 树hash
  19. angular2+ 常用链接
  20. 幼儿园管理系统c语言,【资源学习】c语言程序代码,登录幼儿园200个小朋友的数据...

热门文章

  1. 小程序 - 数组追加兼本地存储
  2. Office2007打开文件提示“您尝试打开的文件xxx.xls的格式与文件扩展名指定的格式不一致”的解决办法...
  3. SQL Server下载安装
  4. serialize-and-deserialize-bst
  5. 开启协程_「科普」什么是协程?
  6. gin 项目结构_Go Web 框架 Gin 路由的学习
  7. linux 上传网页文件大小,Linux:上传未完成的文件 – 文件大小检查(scp / rsync)
  8. 信息学奥赛一本通(1258:【例9.2】数字金字塔)
  9. 信息学奥赛一本通(1330:【例8.3】最少步数)
  10. 信息学奥赛一本通(1048:有一门课不及格的学生)