v-bind 绑定指令

126 阅读1分钟
<h1>v-bind 绑定指令</h1>
<hr>
<div id="app">
    <div :class="className">1、绑定classA</div>
    <div :class="{classA:isOk}">2、绑定class中的判断</div>
    <div :class="[classA,classB]">3、绑定class中的数组</div>
    <div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
    <br>
    <div :style="{color:red,fontSize:font}">5、绑定style</div>
    <div :style="styleObject">6、用对象绑定style样式</div>


</div>

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            className:'classA',
            isOk:true,
            classA:'classA',
            classB:'classB',
            red:'red',
            font:'18px',
            styleObject:{
                color:'block',
                fontSize:'50px'
            }
        }
    })
</script>