先看效果图：

HTML部分：

<div class="xph-panel-body">
     <div class="xph-btn newdom">增加</div>
     <div class="xph-dom">
          <div class="xph-dom-list">
               <span>Demo</span>
               <div class="xph-dom-close">×</div>
          </div>
          <div class="xph-dom-list">
               <span>Demo</span>
               <div class="xph-dom-close">×</div>
          </div>
     </div>
</div>

Js部分

mounted: function () {
     this.$nextTick(function () {
          // 新增
          $('.newdom').click(function () {
              appendDom("Demo");
          });
          function appendDom(str){
             $('.xph-dom').append(
                 '<div class="xph-dom-list">' +
                 '<span>'+ str + '</span>' +
                 '<div class="xph-dom-close">×</div>' +
                 '</div>'
             )
          }
          // 删除
          $('.xph-dom').on("click", ".xph-dom-close", function () {
              $(this).parent().remove();
          })
     })
},

至此完成动态增加及删除元素，以上是完整方法

附加：

Vue生命周期中mounted和created的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。