H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue如何删除最外层元素

有没有自定义一个类似v-if、v-show的指令的思路

<div v-unwrap=”false”>111</div>
表现为
111
当值为false的时候,只有div这个父容器被移除了,但子节点还存在

回答:

使用.sync对一个 prop 进行“双向绑定”,看文档
https://cn.vuejs.org/v2/guide…

回答:

可以用自定义指令,能拿到DOM节点,就很好操作了

回答:

多谢邀请!

给你写了一个删除父元素的demo,希望对你有所启发和帮助!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <div>
            <p v-unwrap:cr>111</p>
        </div>
        <div>
            <p v-unwrap:gi>222</p>
        </div>
    </div>
    <script type="text/javascript">
        //定义一个全局指令
        Vue.directive('unwrap', {
            bind: function(el, binding) {
                el.setAttribute("data-luozz", binding.arg);
                el.onclick = function() {
                    document.querySelector("[data-luozz='" + binding.arg + "']").parentNode.remove();
                }
            }
        });
        new Vue({
            el: '#app',
            data: {},
            methods: {}
        })
    </script>
</body>
</html>

注意

v-unwrap冒号后面那个要像命名id一样是唯一的,指令要根据这个来控制删除相应父节点。

回答:

emmm… 厚着脸皮去issues提了一下

clipboard.png

解决方案供大家参考

2018.3.9更新

vue-web-component-wrapper

本文地址:H5W3 » vue如何删除最外层元素

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址