萌新VueDay2——style与class的绑定

萌新Vue入门笔记day2

这是我学习Vue入门第二天在此记录
强制数据绑定

强制数据绑定

1.class绑定

1.1class直接绑定

<div id="test">
    <h2>1.class绑定</h2>
    //这里的class绑定不是a的css样式而是，data里的a，执行的是a的值（aclass的css样式）
    <p :class="a">第一个</p>
    //这样和class=“aclass”没有区别
</div>

<script>
    const vm = new Vue({
        el:'#test',
        data:{
            a : 'aclass'
        }
    })
</script>

 <style>
        .aclass{
            color:red;
        }
    </style>

1.2绑定class（：class）可以和一般的class共存

    <style>
        .aclass{
            color:red;
        }
        .fontp{
            font-size:24px;
        }
    </style>

<div id="test">
    <h2>1.class绑定</h2>
    <p class="fontp" :class="a">第二个</p>
</div>

<script>
    const vm = new Vue({
        el:'#test',
        data:{
            a : 'aclass'
        }
    })
</script>

1.3绑定class的动态判断

    <style>
        .aclass{
            color:red;
        }
        .bclass{
            color:blue;
        }

        .fontp{
            font-size:24px;
        }
    </style>

<div id="test">
    <h2>1.class绑定</h2>
    //通过这样实现动态判断使用哪个样式
    //这里像isA这样的判断，实现在data中先声明
    //特别是判断，注意别写上‘’，这样就变成字符串了
    <p :class="{ aclass: isA , bclass: isf }">第三个</p>
</div>

<script>
    const vm = new Vue({
        el:'#test',
        data:{
            a : 'aclass',
            f:'fontp',
            //注意别写上‘’，这样就变成字符串了
            isA : true,
            isf : false
        }
    })
</script>

1.4绑定class实现两种的样式重叠

<div id="test">
    <h2>1.class绑定</h2>
    <p :class=  "[a, f]">第四个</p>
</div>

1.5同时实现样式重叠和判断

<div id="test">
    <h2>1.class绑定</h2>
    //这里的f也是data里的
    <p :class="[f,{aclass: isA , bclass: isf}]">第五个</p>
</div>

<script>
    const vm = new Vue({
        el:'#test',
        data:{
            a : 'aclass',
            f:'fontp',
            //注意别写上‘’，这样就变成字符串了
            isA : true,
            isf : false
        }
    })
</script>

1.5通过按钮尝试更新

通过methods计算属性实现

<div id="test">
    <h2>1.class绑定</h2>
    <p :class="a">第一个</p>
    <p class="fontp" :class="a">第二个</p>
    <p :class="{ aclass: isA , bclass: isf }">第三个</p>
    <p :class=  "[a, f]">第四个</p>
    <p :class="[f,{aclass: isA , bclass: isf}]">第五个</p>
    <button @click="upDate">更新</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            a : 'aclass',
            f:'fontp',
            isA : true,
            isf : false
        },
        methods:{
            upDate(){
                this.a = 'bclass',
                this.isA = false,
                this.isf = true
            }
        }
    })
</script>

style绑定

注意style里有个{}

//注意style里有个{}
<p :style="{color: allcolor,fontSize: fontSize}">
:style="{color: allcolor,fontSize: fontSize}</p>
<button @click="upDate">更新</button>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            allcolor:'red',
            fontSize: '30px'
        },
        methods:{
            upDate(){
                this.allcolor='yellow',
                this.fontSize='12px'
            }
        }
    })
</script>

还有个更为舒适方法就是当作一个数组整体放入
注意：style里不再是{}而是[]

//注意style里不再是{}而是[]
<p :style="[json]">:style="[json]"</p>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            json:{
                color: 'red',
                fontSize: '16px'
            }
        }
    })
</script>