vue template动态修改

Vue 模板是一种基于 HTML 的语法，用于声明式地渲染 DOM。想要动态修改 Vue 模板，可以通过以下两种方式实现：

1. 使用计算属性

计算属性是 Vue.js 提供的一种属性，它的值是根据其他属性计算得出的。可以在计算属性中动态修改模板内容。例如：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

在上面的代码中，我们使用计算属性 `reversedMessage` 计算 `message` 的反转字符串，并在模板中动态展示。

2. 使用指令

Vue.js 提供了多个指令，用于修改模板的动态内容。其中，`v-if`、`v-for` 和 `v-bind` 等指令是最常用的。例如：

<template>
  <div>
    <p v-if="showMessage">{{ message }}</p>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
    <button v-bind:disabled="isDisabled">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      showMessage: true,
      items: ['apple', 'banana', 'cherry'],
      isDisabled: false
    }
  }
}
</script>

在上面的代码中，我们使用 `v-if` 控制 `message` 是否显示，使用 `v-for` 渲染列表，使用 `v-bind` 绑定按钮的禁用状态。

总之，Vue.js 提供了丰富的指令和计算属性，可以方便地实现模板的动态修改。