Vue中的字符串模板的使用

在Vue中，我们可以使用字符串模板来定义组件的模板，和使用单文件组件模板一样方便。下面是关于Vue中字符串模板的使用攻略。

使用字符串模板

在 Vue 中，我们可以使用字符串模板来定义组件的模板。字符串模板在 Vue 2 中不再支持，3 之后 Vue.js 又重新支持字符串模板的方式。

字符串模板可以定义在组件选项的 template 属性里，也可以使用 render 函数渲染组件。

示例：

<!-- template 方式 -->
<template>
  <div>{{ message }}</div>
</template>

<!-- render 函数方式 -->
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!',
    };
  },
  render() {
    return h('div', this.message);
  },
};
</script>

在字符串模板中使用JS表达式

在 Vue.js 组件的字符串模板中我们可以使用 JS 表达式。模板中所有的JS表达式都会在编译阶段计算。

示例:

<template>
  <div>{{ message + ' ' + name }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello,',
      name: 'Vue.js',
    };
  },
};
</script>

在字符串模板中使用指令

Vue.js 的指令在字符串模板中也是可以使用的，用法和使用 vue 模板一样，只需要在指令后加上符号 v- 即可。

示例:

<template>
  <div v-if="show">{{ message }}</div>
  <button @click="show = !show">Toggle</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!',
      show: true,
    };
  },
};
</script>

以上就是关于 Vue.js 中字符串模板的使用攻略，希望对你有所帮助。