v-bind

最新推荐文章于 2024-06-24 08:00:00 发布

spfLinux

最新推荐文章于 2024-06-24 08:00:00 发布

阅读量304

点赞数

分类专栏： vue 文章标签： v-bind

vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!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>

spfLinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-bind

百度 --> new Vue({ el:'#example', data:{ msg:'VueJS is Awesome', myUrl:'https://www.baidu.com', imgName:'index5.JPG', imgPath:'img/index5.JPG' } });
复制链接

扫一扫

专栏目录