vue基础：绑定属性class，绑定style-蒲公英云

vue基础：绑定属性class，绑定style

冷不防 2022-03-25 07:55 479阅读 0赞

vue基础：绑定属性class，绑定style

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

1.通过v-bind：title=”****“来绑定显示鼠标悬停时的信息。

<div v-bind:title="title">鼠标悬停</div>
title:'我是一个title',

2.通过v-bind:src”****“绑定动态图片。

<img v-bind:src="url"/><!--绑定属性-->
url:'https://vuejs.org/images/logo.png'

3.绑定数据的另一种方法

<div v-text="msg"></div>等效于{
   {msg}}
msg:'你好vue',

4.通过v-bind:class=”{‘active’:flag}“绑定样式其中，active是样式，flag是取值（true||false）当flag赋值为true时执行active样式。

<div v-bind:class="{'active':flag}">我是一个</div>
flag:false,
.active {
    width: 100px;
    height: 100px;
    background: green;
}

5.同时可以设置样式的摇摆，选择性，当flag为true时执行active，当flag为false执行另一种样式

<div v-bind:class="{'active':flag,'blue':!flag}">我是一个</div>

6.循环输出的第一个数据给样式，首先将值和索引分开表示，更具索引定位值，并修改其样式

<ul>
      <li v-for="(a,index) in list" :class="{'blue':index==0,'active':index==1}">
          {
   {a}}--{
   {index}}
      </li>
    </ul>

7.v-bind:style绑定样式

<div class="box" v-bind:style="{width:boxWdith+'px'}">
    </div>
boxWdith:300
.box{
  border: 3px;
  width: 100px;
  height: 100px;
  background-color: blue;
}
<template>
  <div id="app">
    <h2>{
   {msg}}</h2>
    <br>
  <div v-bind:title="title">鼠标悬停</div>
  <img src="https://vuejs.org/images/logo.png"/>
  <br>
  <img v-bind:src="url"/><!--绑定属性-->
  <br>
  <img :src="url"><!--绑定动态数据-->
  <br>
  {
   {h}}
  <!--绑定html-->
  <div v-html="h"></div>
    <!--绑定另一种数据的方法--><!--绑定另一种数据的方法-->
    <div v-text="msg"></div>
    <br><!--v-bind:class :class的使用-->
    <div v-bind:class="{ 'active':flag}">我是一个</div>
    <br>
    <div v-bind:class="{ 'active':flag,'blue':!flag}">我是一个</div>
    <br>
    <ul>
      <li v-for="(a,index) in list">
          {
   {a}}--{
   {index}}
      </li>
    </ul>
    <!--循环的第一个数据给样式-->
    <!--首先将值和索引分开表示，更具索引定位值，并修改其样式-->
    <br>
    <ul>
      <li v-for="(a,index) in list" :class="{ 'blue':index==0,'active':index==1}">
          {
   {a}}--{
   {index}}
      </li>
    </ul>
    <br>
    <!--v-bind:style-->
    <div class="box" v-bind:style="{ width:boxWdith+'px'}">
    </div>
  </div>
</template>
<script> export default { data(){ return{ msg:'你好vue', title:'我是一个title', url:'https://vuejs.org/images/logo.png', h:'<h2>我是h2</h2>', list:['111','222','333'], flag:false, boxWdith:300 } } } </script>
<style> .active { width: 100px; height: 100px; background: green; } .blue{ color: blue; } .box{ border: 3px; width: 100px; height: 100px; background-color: blue; } </style>