在html中vue.js this.$message失效

在 HTML 中使用 Vue.js 的 `this.$message` 方法是无效的，因为 `this` 关键字只能在 Vue 实例内部使用。

如果你想在 HTML 中显示消息，可以考虑使用其他的 JavaScript 库，例如 `sweetalert2` 或 `toastr`。这些库可以让你创建漂亮的消息提示框。

另外，如果你想在 Vue 组件中使用 `this.$message`，你需要确保在组件中正确引入了 `ElementUI` 库，并且在 `Vue.use(ElementUI)` 调用后，`this.$message` 才会生效。例如：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

export default {
  methods: {
    showMessage() {
      this.$message({
        message: 'Hello world',
        type: 'success',
      });
    },
  },
};

相关问题

vue.js this.$message失效

如果你在 Vue.js 中使用 `this.$message` 函数时发现无效，可能是因为你没有正确地注册 `Message` 组件。

在使用 `this.$message` 函数之前，你需要在 Vue 实例中注册 `Message` 组件。例如：

import Vue from 'vue';
import { Message } from 'element-ui';

Vue.prototype.$message = Message;

或者在组件中使用：

import { Message } from 'element-ui';

export default {
  methods: {
    showMessage() {
      this.$message({
        message: 'Hello world',
        type: 'success'
      });
    }
  },
  components: {
    Message // 注册 Message 组件
  }
}

如果你使用的是其他 UI 框架，也需要根据它的文档注册相应的组件。

Vue.set 与this.$set的区别

Vue.set()和this.$set()都是用来在Vue实例中设置响应式属性的方法。它们的区别在于使用方式和作用域。

Vue.set()是全局方法，可以在任何地方使用。它的语法是`Vue.set(object, key, value)`，其中object是要设置属性的对象，key是属性名，value是属性值。Vue.set()会将属性设置为响应式属性，即当属性值发生变化时，会触发视图更新。

this.$set()是Vue实例的方法，只能在Vue实例中使用。它的语法是`this.$set(object, key, value)`，其中object是要设置属性的对象，key是属性名，value是属性值。this.$set()也会将属性设置为响应式属性。

总结一下区别：
- Vue.set()是全局方法，可以在任何地方使用；this.$set()是Vue实例的方法，只能在Vue实例中使用。
- Vue.set()的调用方式是`Vue.set(object, key, value)`；this.$set()的调用方式是`this.$set(object, key, value)`。

范例：<<引用：Vue.set()的使用。引用：this.$set()的使用。>>
1. 使用Vue.set()设置响应式属性

var vm = new Vue({
 data: {
    obj: {}
  }
})

Vue.set(vm.obj, 'key', 'value')
console.log(vm.obj.key) // 输出：value

2. 使用this.$set()设置响应式属性

var vm = new Vue({
  data: {
    obj: {}
  },
  methods: {
    setProperty() {
      this.$set(this.obj, 'key', 'value')
    }
  }
})

vm.setProperty()
console.log(vm.obj.key) // 输出：value