vuejs模板相关语法

 

使用 v-html 指令用于输出 html 代码：

<template>
  <div id="app">
    <div v-html="message"></div>
  </div>
</template>

<script>
export default{
  name: 'CaiJunjie',
  el: '#app',
  data () {
    return {
      message: '<h1>菜鸟教程</h1>'
    }
  }
}
</script>

<style scoped>

</style>

HTML 属性中的值应使用 v-bind 指令。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

 

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

<script>
export default{
  name: 'CaiJunjie',
  el: '#app',
  data () {
    return {
      use: true
    }
  }
}
</script>

<style scoped>

</style>

Vue.js 都提供了完全的 JavaScript 表达式支持。