SOURCE

new Vue({
  el: '#app',
  data: {
    message: '<h3>v-html指令</h3>',
    use: false,
    ok: true,
    msg: 'RUUOOB',
    id: 1,
    seen: true,
    url: 'http://www.ruboob.com'
  }
})

<div id="app">

    <div v-html="message"></div>

    <div>
       
        <div v-bind:class="{'class1': use}" >
            <h3>v-bind:class 指令</h3>
        </div>
         <label for="r1">修改颜色</label>
        <input type="checkbox" v-model="use" id="r1">
    </div>

    <div>
        <h3>表达式</h3>
        {{5+5}}<br>
        {{ ok ? 'YES' : 'NO' }} <br>
        {{ msg.split('').reverse().join('') }} <br>
        <div v-bind:id="'list-' + id">菜鸟教程</div>
    </div>
    <div>
        <p v-if="seen">see me</p>
         <pre><a v-bind:href="url">菜鸟教程</a></pre>
    </div>
</div>
    

.class1{
    color: rgb(199, 76, 76)
}
#list-1{ font-size: 24px;color: rgb(199, 76, 76)}