在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. ******十三 ******、软设笔记【操作系统】-磁盘管理、虚设备与SPOOLing系统

    五.磁盘管理 1.磁盘的访问时间 *寻道时间Ts:把磁臂从当前位置移到指定磁道上所经历的时间 *选择延迟时间Tr:指定扇区移动到磁头下面所经历的时间. *传输时间Tt:数据从磁盘读出或向磁盘写入数据所 ...

  2. java基础之自定义异常类及throw和throws的区别

    一.异常的架构: Throwable类:所以异常类都是Throwable的子类,它派生两个子类 Error和Exception. Error类:表示仅靠程序本身无法恢复的的严重错误,比如内存溢出,虚拟 ...

  3. String,StringBuilder,StringBuffer区别

    一.String,StringBuilder,StringBuffer的大概了解 大家知道String,StringBuilder,StringBuffer三个的基本应用场景. String会一直创建 ...

  4. 复习java web之jsp入门_El表达式_JSTL标签库

    JSP 技术掌握:JSP语法 + EL + JSTL 为什么sun推出 JSP技术 ? Servlet 生成网页比较复杂,本身不支持HTML语法,html代码需要通过response输出流输出,JSP ...

  5. luogu P4099 [HEOI2013]SAO

    传送门 吐槽题目标题 这个依赖关系是个树,可以考虑树型dp,设f_i表示子树i的答案 因为这是个序列问题,是要考虑某个数的位置的,所以设\(f_{i,j}\)表示子树i构成的序列,i在第j个位置的方案 ...

  6. npm 切换源 nrm

    版权声明:欢迎转载,请附加转载来源:一路博客(http://www.16boke.com) 转载 http://blog.csdn.net/wyc_cs/article/details/5155925 ...

  7. Java中使用到的锁

    同一进程 重入锁 使用ReentrantLock获取锁的时候回判断当前线程是否为获取锁的线程,如果是则将同步的状态+1,释放锁的时候则将状态-1,只有将同步状态的次数置为0的时候才会是最终释放锁. 读 ...

  8. Python 20 Ajax全套

    概述 对于web应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...

  9. python 09

    1.函数进阶: 函数动态参数: 动态位置参数 *args 动态关键字参数 **kwargs 位置 > 动态位置参数 > 默认(关键字)参数 > 动态关键字参数 2.命名空间 局部命名 ...

  10. Javascript入门(二)变量、获取元素、操作元素

    一.变量 Javascript 有五种基本数据类型 number.String.boolean.undefined.null 一种复合类型:object 二.使用getElementById方法获取元 ...