vue-属性-优快云博客

本文链接：https://blog.youkuaiyun.com/Y_web/article/details/119419935

本文详细介绍了如何在Vue应用中使用计算属性(computed)处理数据，展示计算属性的缓存特性，以及如何结合组件(components)和过滤器(filters)进行页面交互和数据转换。通过实例演示了它们在实际开发中的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-属性

1.计算属性computed （有缓存，直接当变量用。）

<body>
	<div id=" app">
		<!-- {{data | fi1}} -->
		{{add}}
		<br>
		{{adc()}}
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" >
		var app = new Vue({
		el: "#app',
		data: {
			date:3
		}:
		methods :{
			adc(){
				return this 。add*9
				//计算属性
			}
		},
		//计算属性
		computed:{
		//里面的( add)可以当成变量
			add(){
				return this.date+1
		},
	</script>
</body>

计算属性computed （有缓存，直接当变量用。）

<body>
	<div id="app">
		<!-- {{data| fi1}} -->
		{{add}}
		<br>
		{{adc()}}
	</div>
	<script src="js/vue .js" type="text/javascript" charset="utf-8" ></script>
	<script type-"text/javascript">
	var app = new Vue({
		e1: ' #app',
		data: {
			date:3
		}.
		methods:{
			adc(){
			return this . add*9
		},
		//计算属性
		computed:{
			//里面的(add)可以当成变量
			add(){
				return this .date+1
			}
		}
		// 顷听属性，检测变量的变化，(新旧两种属性)
		watch:{
			data(news,olds){
				console.1og("改变了")
			}
		}
	</script>
</body>

组件components（引入注册使用）
在这里插入图片描述
过滤器

<div class="asd">{{data|fil}}</div>

<template>
	<div class="he1lo">
		<btn></btn>
		{{msg|fil}}
	</div>
</template>
<script >
	import btn from ' . /new_ file. vue’
	export default {
		name:'HelloWorld ' ,
		data() {
			return {
				msg: ' Welcome to Your Vue .js App'
			}
		}，
		//计算属性
		components : (
			//.里面的( 变量)可以当成变量
			btn
		},
		//过滤器?(运算， 转换)
		filters : {
			fil(res ){
				console. log(res) ;
			}
		}
	}
</ script>