在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. storm+Calcite

    敬请期待... http://blog.csdn.net/yu616568/article/details/49915577 https://github.com/terry-chelsea/bigd ...

  2. 多线程this逃逸

    this逃逸,  是指在构造函数返回之前,其它线程就持有该对象的引用,调用尚未构造完全的对象的方法,可能引发令人疑惑的错误,应该避免this逃逸事件的发生. this逃逸经常发生在构造函数中启动线程或 ...

  3. 拦截对该服务器所有的http请求

    一:拦截对该服务器所有的http请求. 在config 中加, <system.webServer> <modules> <add name="HttpAuth ...

  4. HTML字体自动换行第二行缩进一格

    p {text-indent: -2em; margin-left: 2em;}设置text-indent: -2em;以后p标签中第一行文字向左偏移,这样第二行开始的文字就等于缩进了,但是这样设置会 ...

  5. 洛谷P1972 【[SDOI2009]HH的项链】

    这道题想了很久,发题解是为了理解的更深刻一点...(管理放我过好嘛qwq) 步入正题:这道题应该是很多做法,我选择的是离线+树状数组. 首先输入数组.用fisrt数组先记录元素最开始出现的位置,对应的 ...

  6. Vue 中循环绑定v-module表单

    子组件有一个列表要做输入验证 <template> <div> <el-form :model="value" ref="numberVal ...

  7. jira和svn关联后,不显示Subversion Commits标签或不显示svn提交信息

    1.jira的版本是7.3.6 2.不显示Subversion Commits标签或不显示svn提交信息 其实是权限的分配问题 3.管理员登录 找到对应项目的权限管理 4.[评论权限]——[编辑所有评 ...

  8. 将web项目导入到eclipse中常见错误

     将web项目导入到eclipse中常见错误  错误1:string cannot be resolved to a type  原因:这种情况一般是因为你的JDK版本没有设置好,或者设置的有不一致的 ...

  9. compileSdkVersion,minSdkVersion 和 targetSdkVersion

    compileSdkVersion(Eclipse中叫做build target) 1.在eclipse中位于项目根目录中的project.properties文件中 2.在studio中位于项目中的 ...

  10. vue购物车实战项01

    1. 关于挂载点 2.图片路径 这样的引入方式 是直接文件夹下myVue 3.import 不能用绝对路径 只能用相对路径  图片可以绝对路径 4.引入组件步骤 1.引入组件  @的含义在配置里面可以 ...