vue案例 case2

<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
  .class1{
      background: #444;
      color: #eee;
    }
</style>

<div id="app">
  <p>{{site}}</p>
  <p v-text="url"></p>
  <p v-html="author"></p>
  <p>{{ details() }}</p>

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

<p v-if="seen">现在你看到我了</p>
  <template v-if="ok">
    <h1>xiyueta.com</h1>
  </template>

<ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>

<p> {{ message.split('').reverse().join('') }}</p>

</div>

<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data: {
    site: "xiyuetaJS库",
    url: "www.xiyueta.com",
    author: "<font color=red>xiao yun</font>",
    use: false,
    seen: true,
    ok: true,
    sites: [
      { name: 'Xiyueta' },
      { name: 'Google' },
      { name: 'Taobao' }
    ],
    message: "xiyueta.com"
  },
  methods: {
    details: function() {
      return this.site + " - 学的不仅是技术，更是梦想！";
    }
  }
})
console.log(vm.author)
</script>