Vue学习3----Vue绑定属性，绑定html,绑定class,绑定style

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88941921

效果图：

源码（复制即可使用）
App.vue 文件

<!--04Vue绑定属性，绑定html,绑定class,绑定style-->
<template>
  <!--根节点-->
  <div id="app">
    <div>{{msg}}</div>
    <!--绑定属性-->
    <img v-bind:src="imgurl">
    <!--绑定属性简写，省略v-bind -->
    <img :src="imgurl">
    <!--绑定html,放在div里面-->
    <div v-html="ihtml"></div>
    <!--绑定数据（另一种方法是：直接两层的花括号）-->
    <div v-text="msg2"></div>
    <!--绑定class,绑定的是下面的 red 属性  -->
    <div v-bind:class="{'red':true}">翟浩浩，改变世界3</div>
    <div v-bind:class="{'red':flag,'blue':!flag}">翟浩浩，改变世界4</div>
    <!--数组里面第一个元素变成红色-->
    <!--循环数租，拿到索引值是0的，为红色-->
    <ul>
      <li v-for="(item,key) in list" v-bind:class="{'red':key==0,'blue':key==1}">
        {{'key>>>'+key+'value>>>'+item }}
      </li>
    </ul>
    <!--绑定style-->
    <div class="box" v-bind:style="{'width':boxWith+'px'}">

    </div>

  </div>
</template>

<script>
  //暴露模块
  export default {
    name: 'app',
    //数据
    data() {
      return {
        msg: '翟浩浩，改变世界',
        msg2: '翟浩浩，改变世界2',
        imgurl: 'http://www.cdpf.org.cn/ywzz/xcwh_263/gzdt_264/201412/W020141231638892400544.jpg',
        ihtml: '<h2>标题二</h2>',
        flag: false,
        //数组
        list: ['元素一', '元素二', '元素三'],
        boxWith:'200',
      }
    }
  }
</script>

<style lang="scss">
  .red {
    color: red;
  }

  .blue {
    color: blue;
  }
  img{
    width: 100px;
    height: 100px;
  }
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
  }

</style>

源码下载：