vue学习笔记-6-属性绑定

最新推荐文章于 2024-03-29 19:54:29 发布

笑道三千

最新推荐文章于 2024-03-29 19:54:29 发布

阅读量375

点赞数

分类专栏： # vue基础

本文链接：https://blog.csdn.net/weixin_42349568/article/details/108185633

版权

vue基础专栏收录该内容

37 篇文章 1 订阅

订阅专栏

属性绑定，是单向绑定，通过data中的数值变量（存的是数据或者类名或者其他）来渲染页面，而页面上对数据的更改，并不会影响data中的数据。
属性绑定通常那个用来从服务器获取数据后的渲染页面。
而v-model则是双向绑定，主要用来表单的验证输入
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
			 	display:none
			 }
			 #app{
				 width: 20%;
				 margin: 200px auto;
				 line-height: 40px;
				 border: 1px solid #ccc;
				 padding: 10px;
			 }
			 .box1{
				 height: 50px;
				 width: 100;
				 background: red;
			 }
			 .box2{
				 height: 50px;
				 width: 100;
				 background: blue;
			 }
		</style>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="url">百度</a>
			<a :href="url">百度</a>
			<button @click="change">改变a标签的url</button>
			<div :class="cla"></div>
			<button @click="changeClass1">改变元素的背景色为蓝色</button>
			<button @click="changeClass2">改变元素的背景色为红色</button>
		</div>
		 
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el: "#app",
				data:{
					url:'http://www.baidu.com',
					cla:"box1"
				},
				methods:{
					change:function(){
						this.url='http://www.360.com'
					},
					changeClass1:function(){
						this.cla='box2'
					},
					changeClass2:function(){
						this.cla='box1'
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
实际上就是：

			<div :class="cla"></div>
			<button @click="changeClass1">改变元素的背景色为蓝色</button>
			<button @click="changeClass2">改变元素的背景色为红色</button>

					changeClass1:function(){
						this.cla='box2'
					},
					changeClass2:function(){
						this.cla='box1'	
					}

			 .box1{
				 height: 50px;
				 width: 100;
				 background: red;
			 }
			 .box2{
				 height: 50px;
				 width: 100;
				 background: blue;
			 }

笑道三千

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记-6-属性绑定

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto; line-height: 40px;.
复制链接

扫一扫

专栏目录