Vue.js trennen Stile von Vorlage

Ich verwende eine Vorlage mit einem Stil-Block, die muss in der Nähe sein div für CMS Gründe.Vue.js trennen Stile von Vorlage

Als ich Vue.js laufen, es scheint, es zu entfernen, sagte

- 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.

Was kann ich tun?

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>

Quelle

2017-03-12 Hugo H

Können Sie die Gründe angeben, warum es so nah am div sein muss? –

Ich verwende dynamische Hintergrundbilder, die an mein div gebunden sind und ich kann sie nicht für CMS-Zwecke irgendwo anders als hier platzieren ... –

Wird der Stil mit einer Komponente oder nur einem Vue assoziiert? – Bert

Das für meine Situation funktioniert, wo ich den Benutzern erlauben, eine Reihe von CSS zu speichern und dann muss ich es auf bestimmten Seiten machen.

# 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); 
},

Quelle

2017-06-16 09:21:45 baconck

Vue.js trennen Stile von Vorlage

Antwort

Verwandte Themen