在Vue中使用v-show指令来选择性的显示内容。它的属性值可以是布尔值、属性名称以及函数名称。如果使用函数来控制的话,无论函数内容如何运算判断,最终返回布尔值true或者false就可以了

<div class="food-ratinglist" v-for="item in foodRate" v-show="filterRate(item.rateType,item.text)"></div>
filterRate(type,text){
if(this.onlyContent &&text===''){
return false;
}
if(this.selectType === ALL){
return true;
}else{
return this.selectType === type
}
} //最终返回的都是Boolean

vue v-show绑定的更多相关文章

  1. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  2. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  3. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  4. [js高手之路] vue系列教程 - vue的事件绑定与方法(2)

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...

  5. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  6. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  7. vue数据双向绑定

    Vue的双向绑定是通过数据劫持结合发布-订阅者模式实现的,即通过Object.defineProperty监听各个属性的setter,然后通知订阅者属性发生变化,触发相应的回调. 整个过程分为以下几步 ...

  8. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  9. Vue表单绑定(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  10. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

随机推荐

  1. HTTP 响应类型 ContentType 对照表

    Ø  前言 1.   下面是 HTTP 响应类型 ContentType 的可选值,有备无患先保存一下.摘自:https://wiki.selfhtml.org/wiki/MIME-Type/%C3% ...

  2. Andrew NG 机器学习编程作业6 Octave

    问题描述:使用SVM(支持向量机 )实现一个垃圾邮件分类器. 在开始之前,先简单介绍一下SVM ①从逻辑回归的 cost function 到SVM 的 cost function 逻辑回归的假设函数 ...

  3. 用Windows Media Service打造的流媒体点播

    所谓流媒体是指采用流式传输的方式在Internet播放的媒体格式.和需要将整个视频文件全部下载之后才能观看的传统方式相比,流媒体技术是通过将视频文件经过特殊的压缩方式分成一个个的小数据包,由视频服务器 ...

  4. Git学习之忽略特殊文件.gitignore的配置

    1.Mac中使用Git上传项目代码时忽略.DS_Store文件 简单的说Mac每个目录都会有个文件叫.DS_Store,它是用于存储当前文件夹的一些Meta信息.所以每次查看Git目录的状态,如果没有 ...

  5. Django之CRM项目Day3-客户展示及分页

    1.展示客户 模板的查找顺序: ​ 先找全局的templates--> 按照app的注册顺序找templates中的文件 使用admin添加数据: 创建超级用户 python manage.py ...

  6. cocos2dx 屏幕分辨率

    http://cn.cocos2d-x.org/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework ...

  7. element-ui组件中时间选择器设置时间禁用

    DateTimePicker 日期时间选择器 组件代码 <el-date-picker v-model="value1" type="datetime" ...

  8. HDFS笔记(二)

    fsimage : NameNode启动时,对文件系统的快照 eidt logs : NameNode启动后,对文件系统的改动序列 namenode在全局里就一个进程,所以存在单点问题 DataNod ...

  9. springboot中.yml没有spring的小叶子标志解决办法

    我的idea springboot项目中有两个.yml文件,一个application.yml,一个log4j2.yml,但是只有application.yml显示的是树叶图标,如下所示 做如下配置后 ...

  10. SQL Server - GO

    GO GO是批处理的标志,是一条或多条SQL语句的集合,SQL Server将批处理语句编译成一个可执行单元,此单元称为执行计划. GO语句把程序分成一个个代码块,即使一个代码块执行错误,它后面的代码 ...