uni app数据绑定

忘是亡心i 2022-12-19 13:17 89阅读 0赞

### uni app数据绑定 ###

例子中，对v-if进行了绑定，显示和隐藏

*  变量是 v-if=“haha”
 *  计算属性是 v-if="!specialJud"
 *  方法是 v-if=“specialJudge()”

注意：变量和计算属性，不带()，函数方法必须带()

另外导入外部的js  
var isEmpty = require(’./util.js’).isEmpty;  
无法 v-if="isEmpty()"使用  
必须methods定义方法才能绑定  
然后调用 v-if="misEmpty()"使用

methods: { 
    	misEmpty:function(){ 
    		return isEmpty(); //正确调用
    		// return isEmpty; 错误
    	}
    }

代码如下：

<template>
    	<view class="content">
    		<image class="logo" src="/static/logo.png" @click="changeBool"></image>
    		<view class="text-area" v-if="!specialJud">
    			<text class="title">{ { title}}</text>
    		</view>
    		
    		<image class="logo" src="/static/logo.png" 
    				v-if="misEmpty()"></image>
    	</view>
    </template>
    
    <script>
    	var isEmpty = require('./util.js').isEmpty;
    	export default { 
    		data() { 
    			return { 
    				title: 'Hello',
    				haha: false
    			}
    		},
    		computed:{ 
    			specialJud(){ 
    				return this.haha;
    			}
    		},
    		onLoad() { 
    
    		},
    		methods: { 
    			misEmpty:function(){ 
    				return isEmpty(); //正确调用
    				// return isEmpty; 错误
    			},
    			changeBool(){ 
    				console.log('change')
    				if(this.haha == true){ 
    					this.haha = false;
    				} else { 
    					this.haha = true;
    				}
    				console.log(this.haha)
    			},
    			specialJudge(){ 
    				return this.haha;
    			}
    		}
    	}
    </script>
    
    <style>
    	.content { 
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo { 
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area { 
    		display: flex;
    		justify-content: center;
    	}
    
    	.title { 
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
    </style>

util.js

function isEmpty(time) { 
    	console.log('zhixingle')
    	return true;
    }
    
    module.exports = { 
    	isEmpty: isEmpty
    }

参考  
[https://cn.vuejs.org/v2/guide/computed.html][https_cn.vuejs.org_v2_guide_computed.html]

[https_cn.vuejs.org_v2_guide_computed.html]: https://cn.vuejs.org/v2/guide/computed.html