当前位置：首页 > VUE

vue实现改变内容

2026-02-18 04:14:54VUE

实现 Vue 内容动态更新的方法

数据绑定

通过 v-model 或 {{ }} 插值表达式实现内容与数据的双向绑定。修改数据时，视图会自动更新。

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始内容'
    }
  }
}
</script>

计算属性

使用 computed 处理复杂逻辑，当依赖数据变化时自动重新计算。

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

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

方法调用

通过 methods 定义方法主动更新内容，需要手动触发。

<template>
  <div>
    <button @click="changeContent">修改内容</button>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '原始文本'
    }
  },
  methods: {
    changeContent() {
      this.content = '新内容'
    }
  }
}
</script>

条件渲染

使用 v-if/v-show 根据条件显示不同内容。

<template>
  <div>
    <button @click="toggle">切换</button>
    <p v-if="show">可见内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

列表渲染

通过 v-for 动态渲染数组内容，数组变化时视图自动更新。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['项目1', '项目2']
    }
  },
  methods: {
    addItem() {
      this.items.push('新项目')
    }
  }
}
</script>

组件通信

父组件通过 props 传递数据给子组件，子组件通过 $emit 触发父组件更新。

<!-- 父组件 -->
<template>
  <Child :msg="parentMsg" @update="handleUpdate"/>
</template>

<script>
export default {
  data() {
    return {
      parentMsg: '父组件消息'
    }
  },
  methods: {
    handleUpdate(newMsg) {
      this.parentMsg = newMsg
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="$emit('update', '更新后的消息')">更新</button>
  </div>
</template>

<script>
export default {
  props: ['msg']
}
</script>

Vuex 状态管理

大型应用中使用 Vuex 集中管理状态，通过 commit 和 dispatch 修改全局状态。

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 组件中
this.$store.commit('increment')