很重要: 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意. 现象就是, 修改v-if绑定的值, 切换不生效.

// 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意
<script>
export default {
  name: "DynamicFunc",
  data() {
    return {
      key: '',
      value: '',
  mounted() {
    // 测试一下
    this.callModelFun('funcA');
    this.callModelFun('funcB');
  methods: {
    test(func) {
     * 根据方法名称调用方法
    callModelFun(funcName) {
      let methods = this.$options.methods;
      // 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意
      const _this = this;
      methods[funcName](_this);
     * funcA
     * @param _this
    funcA(_this) {
      console.log("调用A方法")
      _this.key = "A";
      _this.value = "A";
      console.log(_this.key, _this.value)
     * funcB
     * @param _this
    funcB(_this) {
      console.log("调用B方法")
      _this.key = "B";
      _this.value = "B";
      console.log(_this.key, _this.value)
</script>

很重要: 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意. 现象就是, 修改v-if绑定的值, 切换不生效.// 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意&lt;script&gt;export default { name: "DynamicFunc", data() { return 1.v-for循环元素，绑定key 2.在data 中 创建标识isActive=0，这是为了初始化第一个标题为active 3.监听单击事件触发 方法 ，传入点击元素的index改变标识 4.绑定class属性，判断当(index===标识)时添加active-class 二.非循环情况下 动态 添加： 跟 方法 一循环情况同理，只不过将循环的 动态 index更改为固定的编号，将class的判断条件更改为(isActive === 编号)。同样的，在点击事件触发时传入编号更改标识。. v-on:click 点击事件: v-on:click还有一种简短的形式:@click click函数定义在 Vue 实例 methods里面 调用 函数 方法 形式:函数 名 :function(参数){内容} 属性绑定和数据双向绑定： v-bind:title v-bind:title缩写法 :title v-model 模板指令，数据双向绑定 计算属性和侦听器 计算属性: computed 属性通过其他属性计算而来。属性里面定义变量函数 computed:{ Name:function(){ return this.firstName+' '+this.lastName; 想取 Vue data里面的数据可以用this.定义的 名称 通过watch的形式来进行定义 watch:{ firstName:function(){ this.count++; lastName:function(){ this.count--; let methods = this.$options.methods const _this = this methods[option.qryName.name](_this, option) qryxskh (_this, option){ _this.mainData.khaname_long = option.aname_l. //1.在main.js 页面里添加自定义指令 Vue .directive('title', {//单个修改标题 inserted: function (el, binding) { document.title = el.dataset.title //2.在需要修改的页面里添加v-title 指令 2.使用插件 vue -wechat-title //1.安装插件 加载异步组件 从API提取数据 如果您熟悉React Suspense ，那么 vue -async-manager提供一个具有相同 名称 的<Suspense>组件来执行相同的操作，并为此进行额外的功能设计。 此外， vue -async-manager还提供了资源管理器，以帮助您更轻松地管理异步API请求。 接下来，您可以查看以快速入门，也可以查看 。 同时，我们提供了许多以帮助您了解 vue -async-manager 。 yarn add vue -async-manager 或使用npm ： npm install vue -async-manager --save import Vue from "vu