vue2.0-filter 及 在v-if v-show 中的使用

最新推荐文章于 2021-09-06 14:22:57 发布
最新推荐文章于 2021-09-06 14:22:57 发布
阅读量1.6k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/MR-cui/p/8042632.html
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='jquery-3.2.1.js'></script>
    <script src="vue.js"></script>
</head>
<style type="text/css">
    .forDiv{
        border: 1px solid red;
    }
    .showhid{
        display: none;
    }
</style>
<body>
    <script type="text/template" id='item-template'>
        <div>
            <div v-for='item in list'>

                     <div class='forDiv' v-if='a(item.practice) '>
                         {{item.practice | showhid }}
                         <div>
                             {{item.childShowHid }}
                         </div>
                     </div>
            </div>
        </div>
    </script>
    <div id='demo'>
        <item></item>
    </div>


<script>
        Vue.component('item',{
            template:'#item-template',
            data:function(){
                return{
                    msg:123,
                    list:[
                        {practice:"2",childShowHid:"a"},
                        {practice:"3",childShowHid:"b"},
                        {practice:"4",childShowHid:"c"},
                        {practice:"5",childShowHid:"d"},
                        {practice:"6",childShowHid:"e"},
                    ]
                }
            },
            methods:{
                a:function(value){
                    if(value=='2'){
                        return true
                    }else{
                    return false
                    }
                }
            },
            filters: {
              showhid: function (value) {
                    if(value=='2'){
                        return true
                    }else{
                        return false
                    }
              }
            }

        })

        var demo=new Vue({
            el:'#demo'
        })

    
    </script>
</body>
</html>

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/MR-cui/p/8042632.html

                

        

        




    




    

      

        

            

              
                
                  diboxuan0073
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
在vue中使用el-tab-pane v-show/v-if无效的解决

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	



                

              
                



	

		

			

				
					
Vue05--v-if、v-show、filters(过滤器)、v-model

				
			

			

				

					gaxing4615的博客
				

				

					03-23
					
					1112
					
				

			

		

		

			
				
v-if v-else-if v-else
条件判断。当其为true是会渲染数据和显示dom元素。否则不会显示。
<div v-if="fSize==10">显示true</div>
  <div v-else-if="fSize<10">显示else </div>
  <div v-else>显示false</div>...

			
		

	



                


  
              

                


	

		

			

				
					
vue添加博客功能、展示博客详情，主要用到表单、双向绑定、v-show、v-for、过滤器filter等

				
			

			

				

					编程界明世隐的博客
				

				

					12-22
					
					816
					
				

			

		

		

			
				
做了一个表单添加的实例，非常适合入门

没有花时间去做样式，所以不太好看，效果是这样的:



1.用v-model来绑定表单中的各个内容，修改内容后会实时的反映到下面的博客总览中，比如：

博客标题：<input type="text" v-model="blog.title" class='input'>

作者：      <select v-model="blog.author">
         <...

			
		

	





	

		

			

				
					
在v-if属性中使用过滤器 filter，报错

				
			

			

				

					ddx2019的博客
				

				

					07-22
					
					3943
					
				

			

		

		

			
				
Property or method "filterOperateName" is not defined on the instance but referenced during render. Make sure that this property is reactive


 <template v-if="operateName | filterOperateName">
        <p class="enable_font">
          <i cl

			
		

	



		

			
		



	

		

			

				
					
v-if,v-show中如何使用过滤器

				
			

			

				

					Smile_666666的博客
				

				

					03-31
					
					491
					
				

			

		

		

			
				
v-if,v-show中如何使用过滤器
需要在methods中写方法classIdshow
 <div class="beautyNumDetail" v-if="classIdshow(item.classId)">
      <span>预存{{item.pay | fiflterPay}}</span>
</div>

  methods: {
    classIdshow(val) {
      const show = [0,1,2,3,4,5

			
		

	





	

		

			

				
					
Vue2.0 v-for filter列表过滤功能的实现

				
			

			

				

					10-18
				

			

		

		

			
				
今天小编就为大家分享一篇Vue2.0 v-for filter列表过滤功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
vue2.0-vuex2.0-demo-jianshu

				
			

			

				

					03-28
				

			

		

		

			
				
如果需要在本地运行通整个程序的话，需要在本地进行数据库的配置，配置信息写在dbUtil / dbConnection.js文件中，sql语句参照jianshu.sql文件 Vue2.0  Vue资源 发送http请求 威克斯 数据存储 服务端框架 使用Express...

			
		

	





	

		

			

				
					
v-contextmenu：on基于Vue 2.0的ContextMenu

				
			

			

				

					02-06
				

			

		

		

			
				
可通过获取最新版本的资源，在页面中追加相应的js和css文件即可。  <!-- 引入 Vue --> < script src =" https://unpkg.com/vue/dist/vue.js " > </ script > <!-- 引入 VContextmenu 组件 --&...

			
		

	





	

		

			

				
					
vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具

				
			

			

				

					08-19
				

			

		

		

			
				
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具，具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688，如还不会，可私信我。

			
		

	





	

		

			

				
					
vue中使用filter筛选列表信息

				
			

			

				

					buchishutiao的博客
				

				

					09-06
					
					3641
					
				

			

		

		

			
				
完整代码
参考地址
列表筛选地址：https://blog.csdn.net/qq_39101581/article/details/107783302
<template>
  <div>
    <!-- 列表信息 -->
    <!-- 搜索框 -->
    <el-input placeholder="请输入内容" v-model="wordKey" style="width: 30%">
      <i slot="prefi

			
		

	





	

		

			

				
					
v-if和v-else和vue-filter过滤器结合实现的条件判断改变样式的功能

				
			

			

				

					It届辣妈的博客
				

				

					07-24
					
					1825
					
				

			

		

		

			
				
前天做后台管理有一个新需求就是根据条件渲染的数据颜色是不同的，废话少说直接上代码



考点一 v-if和v-else的用法

先说v-if和v-else的用法，在上面代码中v-if里面的条件满足scope.row.zfNumBl-scope.row.payNumThreshold>0这两个值相减大于0这个条件时，页面上显示的数字就标红，v-else-if里面的条件满足Math.abs(scope.row.zfNumBl-scope.row.payNumThreshold)<0.1||Math.

			
		

	





	

		

			

				
					
vue过滤器 v-if v-else的使用

				
			

			

				

					weixin_45265095的博客
				

				

					07-22
					
					886
					
				

			

		

		

			
				
vue过滤器
<div id="app">
    <input type="text" v-model="name" />
    {{name|UpFormatFiter}}
    <p v-text="name"></p>
    <input type="text" v-model="date" />
    {{date|DateFormatFiter}}
    <p v-text="date"></p>

 

			
		

	





	

		

			

				
					
vue中v-if的常见使用

					
热门推荐

				
			

			

				

					马优晨
				

				

					04-01
					
					31万+
					
				

			

		

		

			
				
使用过Vue的小伙伴一定使用过v-if 这个属性，但是这个属性主要是来干什么的呢,他得用途是那些？

这里我总结了一下，v-if使用一般有两个场景：



1-  多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素



2-  进行两个视图之间的切换

下面我写了两个例子，是Vue官方的简单实例。


第一个实例实现了 type等于不同值，A，B，C 三个元素的展示情况。
第二个例子实现了...

			
		

	





	

		

			

				
					
vue中v-if使用过滤器filter报错

				
			

			

				

					鲁小班的博客
				

				

					03-22
					
					1866
					
				

			

		

		

			
				
由于我在v-if中直接使用过滤器报错

错误源码





错误信息



所以建议在v-if中直接使用方法来进行判断






			
		

	





	

		

			

				
					
vue 过滤器

				
			

			

				

					青蛙king的博客
				

				

					08-28
					
					204
					
				

			

		

		

			
				
Vue 过滤器可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：


<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

你可以在一个组件的选项中定义本地的过滤器：



filte

			
		

	





	

		

			

				
					
vue 指令 v-html 中使用过滤器filters功能

				
			

			

				

					累兰羽的博客
				

				

					03-27
					
					1万+
					
				

			

		

		

			
				
1问题原因：Vue2.0 不再支持在 v-html 中使用过滤器解决方法：1： 全局方法（推介）2： computed 属性3： $options.filters（推介）具体用法如下一页：21：使用全局方法可以在 Vue 上定义全局方法：Vue.prototype.msg= function (msg) {      return msg.replace("\n", "&lt;br&gt;")};...

			
		

	





	

		

			

				
					
 vue.js 学习第一天：v-if用法，@click切换以及过滤器使用和计算

				
			

			

				

					weixin_34403693的博客
				

				

					07-08
					
					1218
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="...

			
		

	





	

		

			

				
					
Vue应用（四）---if、for、数组变更检测、过滤/排序显示

				
			

			

				

					hurricane_li的博客
				

				

					06-18
					
					867
					
				

			

		

		

			
				
&lt;!-- 条件渲染,迭代渲染、数组变更检测、过滤/排序显示、自定义组件的v-for使用 --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;&lt;/title&gt;
	&lt;script type="text/javascript" src="https://cdn.bootcs

			
		

	





	

		

			

				
					
vue2.0v-if的用法

					
最新发布

				
			

			

				

					07-27
				

			

		

		

			
				
在Vue.js 2.0中，v-if指令可以与v-else-if和v-else指令一起使用，用于实现多个条件的判断。v-else-if指令用于在前一个条件不满足时判断下一个条件，v-else指令用于在前面的条件都不满足时渲染一个默认的元素或组件。...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值