Vue 基础

插值与表达式

使用双大括号{{ }} 是最基本的文本插值方法，它会自动将我们双向绑定的实时数据显示出来。

示例代码

<template>
  <div id="app">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return { msg: "Hello World !" };
  }
};
</script>

结果:

image.png

v-html

v-html 用来输出HTML。

示例代码

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

<script>
export default {
  name: "app",
  data() {
    return { msg: `<a href='https://vuejs.org/'>Vue官网</a>` };
  }
};
</script>

结果:

image.png

v-pre

v-pre用来显示{{ }}标签，而不进行替换，使用v-pre可以跳过这个元素和它子元素的编译过程。

示例代码

<template>
  <div id="app">
    <span v-pre>{{msg}}</span>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return { msg: "Hello World !" };
  }
};
</script>

结果：

image.png

过滤

Vue支持在{{ }}插值的尾部添加一个管道符|对数据进行过滤，经常用来格式文本。过滤的规则是自定义的，通过个Vue实例添加选项filters来设置。

示例代码

<template>
  <div id="app">
   {{date|formatDate}}
  </div>
</template>

<script>
import Util from "./utils/util.js";
export default {
  name: "app",
  data() {
    return {
      date: new Date()
    };
  },

  filters: {
    formatDate: function(date) {
      return `${date.getFullYear()}-${Util.format(
        date.getMonth() + 1
      )}-${Util.format(date.getDate())} ${Util.format(
        date.getHours()
      )}:${Util.format(date.getMinutes())}:${Util.format(date.getSeconds())}`;
    }
  }
};
</script>

结果：

image.png