01-Vue学习之v-bind:class

学习vue有段时间了，想着把笔记整理下来，有事没事可以翻阅看看。

1.初学的时候，创建一个简单的html页面，引入vue.js,迎接第一个Helloworld

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">{{msg}}</div>

<script>
    var app = new Vue({
        el:'#app',//代表里面的操作都是在该dom下
        data:{//data里面的数据都是服务于这个dom下的
            msg: 'Hello Vue!'
        }
    })
</script>

image.png

此时页面上就可以看到渲染出来的Hello World
其中el是我们绑定在dom上面的标签,data是数据源，必须是一个对象
在页面上渲染直接用data里的数据即可，不需要data.msg,并且用双大括号包裹。
2.v-bind:主要用于属性的绑定。其简写是:（冒号）,如：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

例子：

<div id="app">
    <a v-bind:href="link"/>点击到百度
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            link:'http://www.baidu.com'
        }
    })
</script>

v-bind绑定在属性上就意味着这是处于vue环境中了。
3.v-bind:class 可以用来动态的切换class,可以和普通的class并存
3.1 方式一： :class='变量'

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

<div id="app">
    <p :class="redClassName">点击到百度</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            redClassName:'redClass'//注意要加引号，之前没加，就没用，会报redClass is not defined
        }
    })
</script>

3.2方式二：:class='数组'

<style>
        .redClass{
            color:red;
        }
        .blueClass{
            border: 1px solid blue;
        }
    </style>

<div id="app">
    <p :class="[redClassName,blueClassName]">点击到百度</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            redClassName:'redClass',//属性是样式的名字
            blueClassName:'blueClass'
        }
    })
</script>

image.png

最终渲染到页面上是：

image.png

3.3 方式三 :class='对象'

<div id="app">
    <p :class="{redClass:'isColor',blueClass:'isBlue'}">点击到百度</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isColor:'true',//通过true,false来控制样式是否显示
            isBlue:'true'
        }
    })
</script>

最终渲染到页面是

image.png

3.4 方式四：还可以直接绑定到一个样式对象，让模板更清晰：

<style>
        .redClass{
            color:red;
        }
        .blueClass{
            border: 1px solid blue;
        }
    </style>

<div id="app">
    <p :class="classObject">点击到百度</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            classObject:{
                redClass:'true',
                blueClass:'true'
            }
        }
    })
</script>

3.5 方式五：还可以这样使用：

 <style>
        .greenClass{
            background: green;
        }
        .redClass{
            color:red;
        }
        .blueClass{
            border: 1px solid blue;
        }
    </style>
<div id="app">
    <p :class="['greenClass',{redClass:isColor,blueClass:isBlue}]">点击到百度</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isColor:'true',
            isBlue:'true'
        }
    })
</script>

在页面上渲染的元素是这样的：

image.png