您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

04Vue绑定属性 绑定Class 绑定style-完整

发布时间：2023-04-03 21:49:35编辑：雪饮阅读（）

<template>
  <div id="app">
      <!---绑定属性--->  
      <h2 v-bind:title="title">11</h2>
      <img v-bind:src="src" />
      <!---绑定属性-简写--->
      <img :src="src2" />
      <!---绑定html--->
      <div v-html="html"></div>
      <!---绑定纯文本--->
      <div v-text="html"></div>
      <!---绑定class，是json键值对，每个键值对的左侧值为class的名--->
      <div v-bind:class="{'pink':pink}">绑定class，是json键值对，每个键值对的左侧值为class的名</div>
      <!---绑定class，也可以是绑定为固定的class名--->
      <div v-bind:class="'pink2'">绑定class，也可以是绑定为固定的class名</div>
      <!---绑定class，多条件(取反)--->
      <div v-bind:class="{'pink3':pink3,'pink3false':!pink3}">绑定class，多条件</div>
      <!---绑定class于循环中使用索引判断，当第三个条目时候赋于pink4--->
      <ul>
        <li v-for="(item,key) in list" :class="{'pink4':key==2}">
          {{item}}
        </li>
      </ul>
      <!---绑定class于循环中使用索引判断，多条件--->
      <ul>
        <li v-for="(item,key) in list" :class="{'pink1':key+1==1,'pink2':key+1==2}">
          {{item}}
        </li>
      </ul>
      <!---绑定style属性--->
      <div v-bind:style="{width:width+'px'}">
        我的长是12px
      </div>
  </div>
</template>
<script>
    export default {    
      data () {
        return {
          title:'我是标题',
          src:'http://www.gaojiupan.cn/d/file/mobanfenxiang/gerenbokemoban/19a1f1c75e6eb3a0c77edbf7a6c48d9f.png',
          src2:'http://www.gaojiupan.cn/e/data/images/notimg.gif',
          html:'<img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000"/>',
          pink:true,
          pink3:false,
          list:[1,2,3],
          width:12
        }
      }
    }
</script>

<style lang="scss">
  .pink{
    width:100%;
    height: 50px;
    background-color: pink;
  }
  .pink2{
    width:20%;
    height: 50px;
    background-color: pink;
  }
  .pink3false{
    width:30%;
    height: 50px;
    background-color: green;
  }
  .pink4{
    width:40%;
    height: 50px;
    background-color: pink;
  }
  .pink1{
    width:10%;
    height: 50px;
    background-color: pink;
  }
  .pink2{
    width:20%;
    height: 50px;
    background-color: pink;
  }
</style>