鍍金池/ 問答/HTML/ vue如何刪除最外層元素

vue如何刪除最外層元素

有沒有自定義一個(gè)類似v-if、v-show的指令的思路
如

<div v-unwrap="false">111</div>
表現(xiàn)為
111
當(dāng)值為false的時(shí)候，只有div這個(gè)父容器被移除了，但子節(jié)點(diǎn)還存在
回答
編輯回答
有你在

emmm... 厚著臉皮去issues提了一下

clipboard.png

解決方案供大家參考

2018.3.9更新

vue-web-component-wrapper

2018年4月14日 11:07
編輯回答
尛曖昧

使用.sync對(duì)一個(gè) prop 進(jìn)行“雙向綁定”，看文檔
https://cn.vuejs.org/v2/guide...

2017年9月12日 21:41
編輯回答
不討囍

可以用自定義指令，能拿到DOM節(jié)點(diǎn)，就很好操作了

2018年3月30日 12:17
編輯回答
薔薇花

多謝邀請(qǐng)！

給你寫了一個(gè)刪除父元素的demo，希望對(duì)你有所啟發(fā)和幫助！

<!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">
        //定義一個(gè)全局指令
        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冒號(hào)后面那個(gè)要像命名id一樣是唯一的，指令要根據(jù)這個(gè)來控制刪除相應(yīng)父節(jié)點(diǎn)。
2018年7月21日 10:53