Vue.js從模板中分離樣式

我使用了一個樣式爲模塊的模板，其由於CMS原因必須靠近它的div。Vue.js從模板中分離樣式

當我運行Vue.js，它似乎將其刪除，說

- Templates should only be responsible for mapping the state to the UI.  
    Avoid placing tags with side-effects in your templates, such as <style>, 
    as they will not be parsed.

我能做些什麼？

var app = new Vue({ 
 
    el: '#app' 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script> 
 

 
<div id="app"> 
 
    <style> 
 
    #div_123 { 
 
     background: http://placehold.it/850x150; 
 
    } 
 

 
    @media screen and (max-width: 640px) { 
 
     #div_123 { 
 
     background: http://placehold.it/350x150; 
 
     } 
 
    } 
 
    </style> 
 
    <div id="div_123"> 
 
    Test 
 
    </div> 
 
</div>

來源

2017-03-12 Hugo H

你可以給出爲什麼它必須如此接近div的原因嗎？ –

我使用綁定到我的div的動態背景圖像，我無法將它們放在CMS原因的其他位置，因爲這裏... –

樣式是與組件相關還是僅與Vue相關聯？ – Bert

這適用於我的情況，我允許用戶存儲CSS的字符串，然後我需要使其特定頁面上。

# html 
<html> 
    <head> 
    <style id="app_style"></style> 
    </head> 
    <body> 

    <div id="app"></div> 

    </body> 


# app.vue 

// vue stuff 

mounted(){ 
    $('#app_style').text(""); // clear old css 
    $('#app_style').text(dynamic_css); 
},

來源

2017-06-16 09:21:45 baconck

Vue.js從模板中分離樣式

回答

相關問題