v-bind

最新推荐文章于 2025-10-30 13:40:14 发布

转载最新推荐文章于 2025-10-30 13:40:14 发布 · 377 阅读

文章标签：

#v-bind

vue 专栏收录该内容

35 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	<div id="example">
		<a v-bind:href="myUrl">百度</a>
		<img v-bind:src="'img/'+imgName">
		<!-- <img v-bind:src="imgPath"> -->
	</div>

	<script type="text/javascript">
		new Vue({
			el:'#example',
			data:{
				msg:'VueJS is Awesome',
				myUrl:'https://www.baidu.com',
				imgName:'index5.JPG',
				imgPath:'img/index5.JPG'
			}
		});
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
	<style type="text/css">
		.myRed{
			color: red
		}
	</style>
</head>
<body>
	<div id="example">
		<h1 :class="{myRed:false}">test</h1>
		<p :style="{backgroundColor:myBGColor}">{{msg}}</p>
		<button @click="changeBGColor">点击改变p标签背景色</button>
	</div>

	<script type="text/javascript">
		new Vue({
			el:'#example',
			data:{
				msg:'VueJS is Awesome',
				myBGColor:'#FF0000'
			},
			methods:{
				changeBGColor(){
					this.myBGColor='#0000FF';
				}
			}
		});
	</script>
</body>
</html>