输出对象属性和函数返回值

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>




猜你喜欢

转载自blog.csdn.net/ribmusic/article/details/80253979