Vue v-bind:的使用

<script src="../libs/vue.js"></script>

<div id="app">

    <a v-bind:href="url">点击跳转</a>

    <h2 v-bind:style="color">字体改变颜色</h2>

    <h2 v-bind:class="colorClass">class改变字体颜色</h2>

    <h2 class="green">红色字体</h2>

    <!--语法糖 v-bind：缩写：-->

    <h2 :title="message">v-bind缩写</h2>

    <!--动态参数-->

    <!--指令：[]=''-->

    <p :[name]="value">测试动态参数</p>

</div>

<script>

    var app = new Vue({

        el: '#app',

        data: {

            url: 'https://cn.vuejs.org/',

            color: 'color: red',

            colorClass:'red',

            message:'title的内容',

            name:'title',

            value:'title的数据'

        },

        /*方法写在methods*/

        methods: {}

    })

</script>

<style>

    .red {

        color: red;

    }

    .green{

        color: green;

    }

</style>