Vue 类添加 if - JavaScript

在 Vue 中我们可以使用 v-if 来根据表达式的值动态地添加或删除元素。但如果我们想在 JS 中动态添加元素呢？这时候就需要使用 Vue 的类，并在类的构造函数中添加相应的条件判断。

以下是一个示例代码，展示如何在 Vue 类中使用 if 条件语句：

class MyComponent extends Vue {
  constructor() {
    super();
    this.showContent = true;
  }

  render() {
    return `
      <div>
        ${this.showContent ? '<p>Content is here</p>' : ''}
      </div>
    `;
  }
}

在这个示例中，我们定义了一个名为 MyComponent 的 Vue 类，并在构造函数中添加了一个变量 showContent 并将其初始值设为 true。在 render 方法中，我们使用了 if 条件语句，仅当 showContent 为 true 时，才会添加 <p>Content is here</p> 元素到渲染结果中。

我们还可以通过事件来动态改变 showContent 的值，从而改变渲染结果：

const myComponent = new MyComponent();

document.querySelector('#btn').addEventListener('click', () => {
  myComponent.showContent = !myComponent.showContent;
});

在这个示例中，我们在页面中添加了一个按钮，并监听其 click 事件。当按钮被点击时，我们将 MyComponent 实例的 showContent 属性取反，然后重新渲染页面。

总结

在 Vue 中，我们可以通过在类的构造函数中使用条件语句来动态添加或删除元素。这种方式比使用 v-if 更加灵活，但需要手动处理变量的变化以重新渲染页面。