005_Vue属性绑定

最新推荐文章于 2024-10-09 21:59:43 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-10-09 21:59:43 发布

阅读量269

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122858573

vue 专栏收录该内容

36 篇文章

订阅专栏

1. 如何动态处理属性?

1.1. v-bind指令用法

<a v-bind:href='url'>跳转</a>

1.2. v-bind简写形式

<a :href='url'>跳转</a>

1.3. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>属性绑定</title>
	</head>
	<body>
		<div id="app">
			<div>
				<a v-bind:href="url">百度</a>
				<a :href="url">百度</a>
				<button @click="changeUrl">切换到Vue</button>
			</div>
			
			<br />

			<h3>使用v-bind模拟v-model</h3>
			<div>
				<!-- @input: input的事件 -->
				用户名: <input type="text" v-bind:value="userName" @input="handle" /> {{userName}}<br />
				<!-- 简写形式: <input type="text" v-bind:value="userName" @input="userName=$event.target.value" /> -->
				密码: <input type="password" v-model="password" /> {{password}}
			</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					url: "http://www.baidu.com",
					userName: "",
					password: ""
				},
				methods: {
					changeUrl: function(event) {
						this.url = "https://cn.vuejs.org/";
					},
					handle: function(event) {
						this.userName = event.target.value;
					}
				}
			});
		</script>
	</body>
</html>

1.4. 效果图