輸出對象屬性和函數返回值

App.vue部分

<template>
<div id="app">
    <img src="./assets/logo.png">
    <spans></spans>
</div>
</template>

<script>

  import spans from './components/loginOut'
  
export default {
  name: 'app',
  components: {
    spans
  }
}
</script>

添加html

使用 v-html 指令用於輸出 html 代碼：

<template>
<div id="Hello">
  <p v-html="message"></p>
</div>
</template>
<script>
export default{
  name: '#Hello',
  data() {
    return{
      message:'<h1><a href="http://www.baidu.com">菜鳥教程</a></h1>'
    }
  }
}
</script>

屬性

HTML 屬性中的值應使用 v-bind 指令。

以下實例判斷 class1 的值，如果爲 true 使用 class1 類的樣式，否則不使用該類：

<template>
  <div id="Hello">
    <label for="r1">修改顏色</label>
    <input type="checkbox" v-model="class1" id="r1">
    <br><br>
    <div v-bind:class="{'class1': class1}">
      directiva v-bind:class
    </div>
  </div>
</template>
<script>
export default{
  name: '#Hello',
  data() {
    return{
     class1: false
    }
  }
}
</script>
<style>
  .class1{background: #444;color: #eee;}
</style>

表達式

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

<template>
  <div id="Hello">
      {{5+5}}<br>
      {{ ok ? 'YES' : 'NO' }}<br>
      {{ message.split('').reverse().join('') }}
      <div v-bind:id="'list-' + id">菜鳥教程</div>
  </div>
</template>
<script>
export default{
  name: '#Hello',
  data() {
    return{
      ok:true,
      message:'RUNOOB',
      id:2018
    }
  }
}
</script>

指令

指令是帶有 v- 前綴的特殊屬性。

指令用於在表達式的值改變時，將某些行爲應用到 DOM 上。如下例子：

<template>
    <div id="Hello">
        <p v-if="seen">現在你看到我了</p>
        <template v-if="ok">
          <h1>菜鳥教程</h1>
          <p>學的不僅是技術，更是夢想！</p>
          <p>哈哈哈，打字辛苦啊！！！</p>
        </template>
    </div>
</template>
<script>
export default{
  name: '#Hello',
  data() {
    return{
      seen:true,
      ok:true
    }
  }
}
</script>

參數

參數在指令後以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：

<template>
  <div id="Hello">
      <pre><a v-bind:href="url">菜鳥教程</a></pre>
  </div>
</template>
<script>
export default{
  name: '#Hello',
  data() {
    return{
      url:'http://www.baidu.com'
    }
  }
}
</script>