vue笔记之filters过滤器/computed/v-for

责编:menVScode 2017-09-24 16:58 阅读(1641)

filters:过滤器,对数据进行处理,然后显示出来。当学过滤器的时候,数据是传递到过滤器函数里,最终显示什么内容,是由过滤器决定的,用return返回出去。

<div id="app">
	<!-- 在数据content旁边添加'|',再跟上过滤数据的fn函数,fn内部return返回值就是要显示的数据。 -->
	<p>{{ content | fn(name,age) }}</p>
	<!-- input输入的值默认会传到fn函数中 -->
	<input type="text" v-model='content'>
</div>
var app = new Vue({
	el:'#app',
	data:{ 
		name:'$:',
		content:'0'
	},
	methods:{},
	filters:{ //过滤器
		fn(val,name,age){
                        // 参数val传过来的值就是content
                        // 过滤器可以传入其他的多个参数
			// console.log(arguments);
			return name+val+'元';
		}
	}
});


computed:实时计算,当数据有变化的时候就会执行。

<div id="app">
	<input type="text" v-model='num01'>
	<input type="text" v-model='num02'>
	<p>{{ fn }}</p>
</div>
var app = new Vue({
	el:'#app',
	data:{
		num01:'',
		num02:''
	},
	computed:{ //实时计算
		fn(){
			return Number(this.num01) + Number(this.num02);
		}
	}
});

get、set

<div id="app">
	{{ name }}
</div>
 
<script>
	var app = new Vue({
		el:'#app',
		data:{name:'menvscode.com'},
		computed:{
			all:{
				//当访问all的时候触发
				get:function(){
					//return this.name;
					this.name = '得到';
				},
				//当修改的时候触发 
				set:function(){
					this.name = 'MVC前端网';
				}
			}
		}
	});

	//当修改app.all的时候,就会执行set函数,然后将name重新赋值。
	app.all = '123';
	//app.all
</script>


methods、computed都能实现实时计算的功能,但是一般都会写在computed里。

<div id="app">
	<input type="text" v-model='num01'>
	<input type="text" v-model='num02'>
	<p>fn:{{ fn }}</p>
	<p>fn2:{{ fn2() }}</p>
</div>
var app = new Vue({
	el:'#app',
	data:{
		num01:'',
		num02:''
	},
	computed:{ //实时计算
		fn(){
			return Number(this.num01) + Number(this.num02);
		}
	},
	methods:{
		fn2(){
			return Number(this.num01) + Number(this.num02);
		}
	}
});


v-for:

<div id="app">
	<ul>
		<!-- <li v-for=" content in news ">{{i}}</li> -->
		<li v-for=" (content,index) in news ">{{content}}---{{index+1}}</li>
	</ul>
</div>
var app = new Vue({
	el:'#app',
	data:{
		news: ['第1条新闻','第2条新闻','第3条新闻','第4条新闻']
	}
});

json格式的数据

<div id="app">
	<ul>
		<li v-for=" (content,index) in news ">{{content.name}}--{{content.sex}}--{{index+1}}</li>
	</ul>
</div>
var app = new Vue({
	el:'#app',
	data:{
		news: [{name:'小红',sex:'女'},{name:'小牛',sex:'男'},{name:'小力',sex:'男'}]
	}
});


通过methods里的函数返回数据

<div id="app">
	<ul>
		<li v-for=" (content,index) in fn() ">{{content}}----{{index+1}}</li>
	</ul>
</div>
var app = new Vue({
	el:'#app',
	methods:{
		fn(){
			var arr = [];
			for( var i=0; i<10; i++){
				arr.push('这是第'+i+'个!!!');	
			}
			return arr;
		}
	}
});


标签: filters computed v-for
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码