03绑定属性

绑定属性

v-bind

v-bind用于绑定一个或多个属性值,或者向另-一个组件传递props值

<div id="app">
    
  <!-- <img src="{{imgURL}}" alt=""> -->
  <!--  错误的用法:这里不可以使用mustache语法-->
    
  <!-- 正确用法：使用v-band指令 -->
  <a v-bind:href="aHref">百度</a>
  <img v-bind:src='imgURL' alt="" >

  <!-- 语法糖的写法 -->
  <a :href="aHref">百度</a>
  <img :src='imgURL' alt="" >
    
</div>

<body>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				massage: "你好",
        imgURL:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
        aHref:"https://www.baidu.com/"
			}
		})
	</script>
</body>

v-bind 动态绑定class（对象语法）

  • 可以通过{ }绑定一个类
  • 也可以通过判断，传入多个值
  • 和普通类同时存在，并不冲突
  • 如果过于复杂，可以放在一个methods或者computed中
<style>
    .active{
      color: red;
    }
  </style>
</head>

<div id="app">
	<!-- <h2 class="active">{{massage}}</h2>
  <h2 :class="active">{{massage}}</h2> -->
  
  <!-- <h2 :class="{类名1:ture,类名2:boolean}">{{massage}}</h2> 对class对象进行选择-->
  <h2 v-bind:class="{active: isActive , line: isLine}">{{massage}}</h2>   
  <!-- 将内容放在一个methods里，并调用 -->
  <h2 v-bind:class="getClasses()">{{massage}}</h2>   
  <button v-on:click="bntClick">按钮</button>
  <!-- 监听按钮，使用bntClick方法 -->
</div>

<body>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				massage: "你好",
        active:'active',
        isActive:true,  //设置boolean值决定是否启用
        isLine:true
			},
      methods:{
        bntClick: function(){
          this.isActive=!this.isActive
        },
        getClasses:function(){
          return {active: this.isActive, line: this.isLine}
        }
      }
		})
	</script>
</body>

v-bind 动态绑定class（数组语法）

<div id="app">
  <!-- 如果在[]数组里的元素加了引号，代表他是一个字符串，而不是引用一个变量 -->
  <h2 :class="[active,line]">{{massage}}</h2>
  <h2 :class="['active','line']">{{massage}}</h2>
  <h2 :class="getClasses()">{{massage}}</h2>
</div>

<body>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				massage: "你好",
        active:"aaa",
        line:"bbb"
			},
      methods:{
        getClasses:function(){
          return [this.active,this.line]
        }
      }
		})
	</script>
</body>

v-bind 绑定style

<div id="app">
	<!-- <h2 :style="{key(属性名):value(属性值)}">{{massage}}</h2> -->

  <!-- 这里要加' '要不然vue会去解析50px这个变量然后报错 -->
  <h2 :style="{fontSize: '50px'}">{{massage}}</h2>
  
  <!-- finalSize当成一个变量在使用 -->
  <h2 :style="{fontSize: finalSize}">{{massage}}</h2>

  <!-- 也可以拼接 -->
  <h2 :style="{fontSize: finalSize + 'px',color:finalColor}">{{massage}}</h2>

  <!-- 数组语法 -->
  <h2 :style="[baseStyle,baseStyle1]">{{massage}}</h2>
</div>

<body>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				massage: "你好",
        finalSize: 100,
        finalColor: 'red',
        baseStyle:{color:'red'},
        baseStyle1:{fontSize:'75px'}
			}
		})
	</script>
</body>

小作业：点击列表中的哪一项, 那么该项的文字变成红色

<style>
	.active {
			color: red;
		}
	</style>
</head>

<div id="app">
	<ul>
		<li v-for="(item, index) in movies" :class="{active: currentIndex === index}" @click="liClick(index)">
            <!-- {active: currentIndex === index}当currentIndex === index为true时，改变颜色  -->
			{{index}}.{{item}}
		</li>
	</ul>
</div>

<body>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				movies: ['海王', '火影忍者', '进击的巨人', '死神'],
				currentIndex: 0
			},
			methods: {
				liClick(index) {
					this.currentIndex = index
				}
			}
		})
	</script>
</body>
posted @ 2021-11-08 22:46  天亮說晚安  阅读(35)  评论(0)    收藏  举报