vue中动态参数与计算属性的使用方法

 更新时间:2021年08月09日 10:26:30   作者:东海029  
在平时vue开发中,我们经常会用到计算属性(计算属性只有在它的相关依赖发生改变时才会重新求值)来计算我们需要的数据,下面这篇文章主要给大家介绍了关于vue中动态参数与计算属性使用的相关资料,需要的朋友可以参考下

一,动态参数

从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:

<a v-bind:[attributeName]=“url”> …

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data property attributeName,其值为 “href”,那么这个绑定将等价于 v-bind:href。

同样地,你可以使用动态参数为一个动态的事件名绑定处理函数:

<a v-on:[eventName]=“doSomething”> …

在这个示例中,当 eventName 的值为 “focus” 时,v-on:[eventName] 将等价于 v-on:focus。

举例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态参数</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id='app7'>
			<span v-on:[event_name]='dosomething'>{{msg}}</span>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app7",
			data:{
				msg:100,
				event_name:'click'
			 },
			methods:{
				dosomething:function(){
					this.msg = this.msg + 1
				}
			}
		})
	</script>
</html>

二、计算属性

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

{{ message.split('').reverse().join('') }}

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。

所以,对于任何复杂逻辑,你都应当使用计算属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id = 'app'>{{value_add}}</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				value:100
			},
			
			computed:{  //与methods方法类似
				value_add:function(){
					return this.value + 100
				}
			}
		})
	</script>
</html>

总结

到此这篇关于vue中动态参数与计算属性使用的文章就介绍到这了,更多相关vue动态参数与计算属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue+Flask实现简单的登录验证跳转的示例代码

    Vue+Flask实现简单的登录验证跳转的示例代码

    本篇文章主要介绍了Vue+Flask实现简单的登录验证跳转的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue中的watch是什么以及watch和computed的区别

    Vue中的watch是什么以及watch和computed的区别

    这篇文章主要介绍了Vue中的watch是什么以及watch和computed的区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue3项目中引入html页面的方法举例

    Vue3项目中引入html页面的方法举例

    这篇文章主要给大家介绍了关于Vue3项目中引入html页面的相关资料,Vue3是一个JavaScript框架,通常我们使用它来构建单页应用程序(SPA),如果你想在HTML页面中使用Vue3,可以参考这篇文章,需要的朋友可以参考下
    2023-09-09
  • vue2.0 实现导航守卫的具体用法(路由守卫)

    vue2.0 实现导航守卫的具体用法(路由守卫)

    这篇文章主要介绍了vue2.0 实现导航守卫的具体用法(路由守卫),vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • vue后台管理添加多语言功能的实现示例

    vue后台管理添加多语言功能的实现示例

    这篇文章主要介绍了vue后台管理添加多语言功能的实现示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • Vue中 Runtime + Compiler 和 Runtime-only 两种模式含义和区别详解

    Vue中 Runtime + Compiler 和 Runtime-o

    这篇文章主要介绍了Vue中 Runtime + Compiler 和 Runtime-only 两种模式含义和区别,结合实例形式详细分析了Vue中 Runtime + Compiler 和 Runtime-only 两种模式基本功能、原理、区别与相关注意事项,需要的朋友可以参考下
    2023-06-06
  • 解析VUE中nextTick是什么

    解析VUE中nextTick是什么

    nextTick是Vue提供的一个全局API,由于Vue的异步更新策略导致我们对数据的修改不会立刻体现,在DOM变化上,此时如果想要立即获取更新后的DOM状态,就需要使用这个方法,这篇文章主要介绍了解析VUE中nextTick,需要的朋友可以参考下
    2022-11-11
  • 前端Vue2、Vue3和不同版本nuxt的插槽使用详解

    前端Vue2、Vue3和不同版本nuxt的插槽使用详解

    这篇文章主要介绍了前端Vue2、Vue3和不同版本nuxt的插槽使用的相关资料,Vue2和Vue3中,插槽机制允许在组件模板中定义占位符,并在使用组件时插入自定义内容,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • 详解给Vue2路由导航钩子和axios拦截器做个封装

    详解给Vue2路由导航钩子和axios拦截器做个封装

    本篇文章主要介绍了详解给Vue2路由导航钩子和axios拦截器做个封装,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue插槽简介和使用示例详解

    Vue插槽简介和使用示例详解

    插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签,这篇文章主要介绍了Vue插槽的理解和使用,需要的朋友可以参考下
    2023-03-03

最新评论