vue2.* 绑定属性 绑定Class 绑定style 03

Posted 2021-01-02 zsczsc

<template>
  <div id="app">
    <!-- 绑定属性 -->
    <div v-bind:title="title">你好，世界</div>
    <!-- 绑定class -->
    <div :class="{‘red‘:flag,‘blue‘:!flag}">你好，世界</div>
    <!-- 绑定style -->
    <div class="box" :style="{width:boxwidth+‘px‘}"></div>
    <!-- 绑定html -->
    <div v-html="h"></div>
    <!-- 绑定数据2 -->
    <div v-text="msg"></div>
    <!-- 循环数据，第一个高亮 -->
    <ul>
        <li v-for="(item,key) in list" :class="{‘blue‘:key%2==0,‘red‘:key%2!=0}">
            {{key}}---{{item}}
        </li>
    </ul>
       
  </div>
</template>

<script>
export default {
  data () {
    /*业务逻辑里面定义的数据*/
    return {
        title:‘你好,世界‘,
        h:‘<h2>h2</h2>‘,
        msg:‘你好vue‘,
        list:[1,2,3],
        flag:true,
        boxwidth:300
    }
  }
}
</script>

<style>
    .red{color:red}
    .blue{color:blue}
    .box{
        height:100px;
        width:100px;
        background:red
    }
</style>