vue-数据绑定

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/smj20170417/article/details/82178939
  • 变量绑定
  • value绑定
  • html绑定

参见下面代码:

app.js:
new Vue({
	el:"#div-id",
	data:{
		name:"hello world",
		href:"http://www.baidu.com",
		nametag:"<a href='baidu.com'>百度</a>"
	},
	methods:{
		fun:function(){
			return "fun() 被调用";
		}
	}
});
html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="div-id">
			<div>
			   {{name}}
			</div>
			<div>
				{{fun()}}
			</div>
			<div>
				<a v-bind:href="href">百度</a>				
			</div>
			<div>
				value绑定
				<input type="text" v-bind:value="name" />
			</div>
			<div>
				html绑定
			<div v-html="nametag">
				
			</div>
				</div>
		</div>
		<script type="text/javascript" src="js/app.js" ></script>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/smj20170417/article/details/82178939