Vue学习笔记(一)

Vue的渲染

<div id="vue">{{message}}</div>

var vm = new Vue({
    el: "#vue",
    data: {
        message: "vue练习"
    }
})

页面上会渲染出数据： vue练习

<div id="vue1">
    <div :style="{color: txtColor}">绑定样式，改变字体颜色</div>
    <div :style="styleObj">绑定样式，设置多种样式</div>
</div>

var vm1 = new Vue({
    el: "#vue1",
    data: {
        txtColor: 'red',
        styleObj: {
            fontSize: '16px',
            color: 'blue'
        }
    }
})

页面上会渲染出数据：

<style>
    isShow: {
        display: none;
    }
</style>
<div id="vue2">
    <div :class="{'isShow': showFlag}">看不见我看不见我</div>
    <div :class="[showFlag ? '' : 'isShow', 'color1']">可以绑定多个样式哦</div>
</div>

var vm2 = new Vue({
    el: "#vue2",
    data: {
        showFlag: true
    }
})

页面上的渲染结果是：