vue v-bind:style 方法传参改变button颜色！

最新推荐文章于 2024-05-29 18:55:00 发布

酒上

最新推荐文章于 2024-05-29 18:55:00 发布

阅读量1.7k

点赞数

分类专栏：学习随记

本文链接：https://blog.youkuaiyun.com/weixin_45189306/article/details/105570080

版权

学习随记专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中利用v-bind:style指令动态地改变button元素的颜色。通过将颜色值作为参数绑定到样式对象，可以实现按钮颜色的动态响应，为用户体验增加更多交互性。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		
	</style>
	<body>
		<template id='tmp'>
				<button v-bind:style='getStyle(type)'>{{title}}</button>
			</template>
			<div id="app">
			    <!--使用定义好的全局组件-->
			    <tom-button title="hello" type='success'></tom-button>
				<tom-button title="Angularjs" type='danger'></tom-button>
				<tom-button title="Angularjs" type='normal'></tom-button>
			</div>
			</body>
			
			<script type="text/javascript">
			    // 定义全局组件，两个参数：1，组件名称。2，组件参数
			    Vue.component("tom-button",{
			        template:'#tmp',
					props:['title', 'type'],
					methods: {
						getStyle(type) {
							console.log(type);
							if (type=='success')
							   return {border: 'green 2px solid'}
							if (type=='danger')
							   return {border: 'red 2px solid'}
							return {border: 'gray 2px solid'}
						}
					}
			    })
			    var app = new Vue({
			        el:"#app"
			    })
			</script>
</html>