04-属性

1、tab切换

 <style>
        .mainBox {
            width: 300px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .onlyBox {
            flex: 1;
            height: 100%;
            border: 1px solid #777;

        }

        .contentBox {
            width: 300px;
            height: 600px;
            background-color: #ececec;
            text-align: center;
            line-height: 600px;
            font-size: 23px;
            color: #ff0000;
        }

        /* 被选中时加载该样式 */
        .selectSty {
            background-color: chocolate;
            color: #fff;
            font-weight: bold;
        }
    </style>

<div id="app">

    <div class="mainBox">
    <!-- :class = "{className1:(条件1),className2:(条件2)}" -->
    <div class="onlyBox" :class={selectSty:index===0} 
    @click="setIndex(0)">项目1</div>
    <div class="onlyBox" :class={selectSty:index===1} 
    @click="setIndex(1)">项目2</div>
    <div class="onlyBox" :class={selectSty:index===2} 
    @click="setIndex(2)">项目3</div>
    </div>

     <div class="contentBox" v-if="index === 0">内容1</div>
     <div class="contentBox" v-if="index === 1">内容2</div>
     <div class="contentBox" v-if="index === 2">内容3</div>
</div>

<script>
    var vm = new Vue({
    el: '#app',
    data: {
    index: 0 //通过index 判断 显示哪一项（index0 显示 内容1 index1 显示内容2 ）
  },
    methods: {
    setIndex(ind) {
    console.log(ind);
    this.index = ind;
    }
  }
})
</script>

上述运行结果：

 2、v-bind

<div id="app"> 
    <!-- 动态绑定class -->
    <div v-bind:class="{colorSty:isShow}">动态绑定class</div>
    <!-- 通过三元运算符 动态绑定class  -->
    <div :class="[isShow?'colorSty':'colorElse']">我是class 的三元运算符</div>
    <!-- 在不同条件下　执行不同的ｃｌａｓｓ -->
    <div class="sizeSty" 
    :class="{colorSty: index ===0,colorElse:index === 1,
    colorDs: index === 2}">在不同条件下　执行不同的
</div>

    <input type="number" v-model.number="index">
        <!-- : === v-bind   简写的方式 -->
        <div :style="{fontSize: size+'px'}">我是动态绑定Style</div>
        <!-- 通过三元运算符进行动态绑定 -->
        <div :style="{color:(isShow?'#0099ff':'#ff0000')}">我是三元运算符</div>

        <button @click="setSize">改变字体大小</button>
        <button @click="setSrc">改变isShow</button>
    </div>

<script>
    var vm = new Vue({
    el: "#app",
    data: {
    isShow: true,
    size: 30,
    index: 0
    },
    methods: {
        setSrc() {
        this.isShow = !this.isShow
    },
        setSize() {
        // this.size = 20;
        // if (this.size === 20) {
        //     this.size = 30
        // } else {
        //     this.size = 20
        // }
        //三元运算的方法
        this.size = this.size === 30 ? 20 : 30
        },
     }
 })
</script>

上述运行结果：