vue-数据绑定

学习不止于前

于 2018-08-29 10:14:27 发布

阅读量142

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/smj20170417/article/details/82178939

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

变量绑定
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>