vue2.0-绑定属性-绑定class-绑定style

App2.0配置：绑定属性-绑定class-绑定style

 

1、需求：效果展示如下，

 

 2、源码如下，

<template>

<!-- vue的模板里面，所有的内容要被一个根节点包含起来 -->

  <div id="app">

    <h2>你好,{{ msg }}</h2>

    <br>

    <!--1、绑定属性用途：鼠标放上去有显示，2、引用图片地址-->

    <div v-bind:title="title">鼠标描上去看看</div>

    <img src="http://image.tb.top:12000/vue.jpg">

    <hr>

    <img :src="url">

    <br>

    {{ aaa }}

    <div v-html="aaa"></div>  <!--绑定数据方法1-->

    <div v-text="msg"></div>  <!--绑定数据方法2-->

    <ul>

      <li v-for="(item,index) in list" :key="index">{{item}}</li>

    </ul>

    <!--v-bind:class   ：class使用-->

    <div v-bind:class="{'red':flag}">我是第一个div</div>

    <!--v-bind:class   ：class使用:当flag为false，蓝色才生效-->

    <div :class="{'red':flag,'blue':!flag}">我是第二个div</div>

    <!--循环数据：第一个数据红色高亮，第二个数据蓝色高亮-->

    <ul>

      <li v-for="(item,index) in list"

        :class="{'red':index==0,'blue':index==1}" :key="index">

        {{item}}

      </li>

    </ul>

    <!--v-bind:style   ：style绑定样式使用-->

    <div class="box" v-bind:style="{width:boxWdith+'px'}">

      绑定style属性,测试宽度

    </div>

  </div>

</template>

<script>

export default {

  name: 'App',  //组件名字，无实际含义

  data() {   //业务逻辑里面定的数据

    return {

      msg: 'Vue2.0',

      title: '我是一个title',

      url:'http://image.tb.top:12000/vue.jpg',

      aaa:'<h3>测试绑定数据</h3>',

      list:['111','222','333'],

      //flag: true

      flag: false,

      boxWdith:300

    }

  }

}

</script>

<style>

.red {

  color:red;

}

.blue {

  color: blue;

}

.box {

  height: 100px;

  width: 100px;

  background: gray;

}

</style>

完毕。