Question

是否可以动态更改单个文件组件中作用域的内容？

＆＃xA;

Answer 1

内部样式标签，没有。由于构建提取.css文件，因此无法实现。

但作为替代方案，您可以将javascript对象用作样式对象。

＆＃13;

var app = new Vue({
  el: '#app',
  data: function(){
    return {
      textAreaStyle: {border: '2px solid blue', color: 'red', width: '500px', height: '300px'}
    }
  },
  methods: {
    updateStyle (event) {
      this.$set(this.$data, 'textAreaStyle', JSON.parse(event.target.value));
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <textarea :style="textAreaStyle" @change="updateStyle">{{textAreaStyle}}</textarea>
</div>

＆＃13;

Answer 2

您可以使用v-html指令。

由于我不知道您的实际代码，因此我将为您提供基本概念验证的代码。

在模板中......

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

在剧本中......

<script>
export default {
    data() {
        return{
           csscode: null,
           styles: null,
        }
    },
     watch:{
        csscode(val){
            this.styles = '<style>' + val + '</style>';
        }
    }
 }
</script>

动态更改单个文件组件内的<style>

2 个答案: