vue如何删除最外层元素

spike

2482612

发布于
2018-02-01

更新于
2018-02-01

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

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

vue.js

阅读 10.3k

4 个回答

得票最新

lady

36831631

发布于
2018-02-01

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

HenryYang

34465064

发布于
2018-02-01

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

luozz

5.8k3629

发布于
2018-02-01

更新于
2018-02-01

多谢邀请！

给你写了一个删除父元素的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>

注意