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

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

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

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

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

title:'我是一个title',

#### 2.通过v-bind:src"\*\*\*\*"绑定动态图片。 ####

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样式。 ####

flag:false,

.active {
    	width: 100px;
    	height: 100px;
    	background: green;
    }

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

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

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

#### 7.v-bind:style绑定样式 ####

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}}
      
      <div v-html="h"></div>
        
        <div v-text="msg"></div>
        <br>
        <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>
        
        <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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]: /images/20220325/c851f817153d4d4db8fdc742ccdf4dd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 1]: /images/20220325/4486d721e2f64920bc4f32dad1b6c196.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 2]: /images/20220325/b016f80405e143da869207961ef2dec5.png