动态改变<style>在单个文件组件中 [英] Dynamically change <style> inside a Single File Component
本文介绍了动态改变<style>在单个文件组件中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以动态更改单个文件组件内作用域的内容?
解决方案
您可以使用 v-html 指令来实现.
因为我不知道你的实际代码，所以我只会给你一个基本概念证明的代码.
在模板中...
<div><head v-html="styles"></head><div class="test"><p>更改本段</p><textarea name="" id="" cols="30" rows="10" v-model="csscode"></textarea>
在脚本中...
Is it possible to dynamically change the content of a scoped inside a Single File Component?
解决方案
You could do it using the v-html directive.
Since I don't know your actual code I will just give you the code for a basic proof of concept.
In the template...
<template>
<div>
<head v-html="styles"></head>
<div class="test">
<p>change this paragraph</p>
</div>
<textarea name="" id="" cols="30" rows="10" v-model="csscode"> </textarea>
</div>
</template>
In the script...
<script>
export default {
data() {
return{
csscode: null,
styles: null,
}
},
watch:{
csscode(val){
this.styles = '<style>' + val + '</style>';
}
}
}
</script>
这篇关于动态改变<style>在单个文件组件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
