vuejs 템플릿 내에서 스타일 태그를 사용하고 데이터 모델에서 업데이트

vuejs 템플릿 내에서 스타일 태그를 사용하고 데이터 모델에서 업데이트

스타일을 동적으로 업데이트하고 싶다inside스타일 태그

그러나 Vue에 대한 컨테이너 모델을 생성하면 이 컨테이너 모델을 제거할 수 있습니다.style태그입니다. 스타일 태그는 페이지 선두에 있어야 한다는 것을 알지만, 이것은 단지 사용하기 쉽기 때문입니다.

그래서 제가 원하는 것은 안에 요소와 스타일 태그가 있는 래퍼입니다.

<div class="setting">
  <style>
    .setting input {
      background: {{bgColor}};
    }
  </style>
  <input class="setting" type="text" v-model="bgColor">
</div>

입력 값에 따라 css 스타일의 값이 갱신됩니다.간단한 div 요소를 사용할 때마다 이것은 작동하지만 스타일 태그는 문제가 있는 것 같습니다.

Javascript 설정은 다음과 같습니다.

new Vue({
    el: '.setting',
    data: {
      bgColor: 'red'
    }
});

그러나 스타일 태그에 특정 ID가 있을 경우 이 작업은 수행될 수 있지만 입력 필드에 바인딩할 수 없습니다.

<style id="setting">
  #blue {
    background: {{bg}}
  }
  #blue:hover {
    background: {{bgHover}}
  }
</style>

<div id="blue"></div>

및 js:

new Vue({
    el: '#setting',
    data: {
      bg: 'blue',
      bgHover: 'red'
    }
});

스타일 태그 간의 값을 갱신하는 방법을 이해할 수 있는 사람이 있습니까?jsfiddle

고마워요.

다음은 적절한 회피책/솔루션이라고 생각합니다.

커스텀 컴포넌트이기 때문에 최대한 재사용이 가능합니다.Vue의 모든 상품은v-if모두 사용할 수 있습니다.

또 다른 장점은 생성된 스타일이 컴포넌트가 존재하는 한에만 존재한다는 것입니다.

Vue.component('v-style', {
  render: function (createElement) {
    return createElement('style', this.$slots.default)
  }
});


// demo usage, check the template
new Vue({
  el: '#app',
  data: {
    bgColor: 'red'
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app" class="stuff">
  <v-style>
    .stuff input {
      background: {{bgColor}};
    }
  </v-style>

  Remove "red" and type "yellow":
  <input class="setting" type="text" v-model="bgColor">
</div>

제가 본 단점은 태그의 이름이<v-style>(또는 뭐라고 부르든)이 아니라<style>, IDE 에 의해서 색칠이 잘 되지 않는 경우가 있습니다.하지만 그렇지 않으면 그냥 보통처럼 될 거야<style>태그를 붙입니다.

---

표준 솔루션: 사용v-bind:style

이것은 수정되지 않습니다.style태그를 지정하지만 스타일을 설정하는 표준 방법은 객체 스타일 바인딩을 사용하는 것입니다.

기본적으로는,:style오브젝트 형식으로 스타일의 CSS 속성을 할당하고 속성을 지정합니다.아래 데모

new Vue({
  el: '.setting',
  data: {
    bgColor: 'red'
  },
  computed: {
    inputStyles() {
      return {
        background: this.bgColor
      }
    }
  }
});

<script src="https://unpkg.com/vue"></script>

<div class="setting">
  Remove "red" and type "yellow":
  <input class="setting" type="text" v-model="bgColor" :style="inputStyles">
</div>

vue-loader(및 Vue 템플릿 컴파일러)는 둘 다 모든 것을 필터링합니다.<style>에서 검출된 태그template.

이를 회피하기 위한 간단한 솔루션은 Vue의 내장<component> 컴포넌트를 활용하는 것입니다.

<template>
  <div>
    <component is="style">
      .foo[data-id="{{ uniqueId }}"] {
        color: {{ color }};
      }
      .foo[data-id="{{ uniqueId }}"] .bar {
        text-align: {{ align }}
      }
    </component>
    <div class="foo" :id="id" :data-id="uniqueId">
      <div class="bar">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: null
    }
  },
  computed: {
    uniqueId() {
      // Note: this._uid is not considered SSR safe though, so you
      // may want to use some other ID/UUID generator that will
      // generate the same ID server side and client side. Or just
      // ensure you always provide a unique ID to the `id` prop
      return this.id || this._uid;
    },
    color() {
      return someCondition ? 'red' : '#000';
    },
    align() {
      return someCondition ? 'left' : 'right';
    }
  }
}
</script>

스타일을 이 컴포넌트만으로 「범위 설정」하려면 , 일의의 ID(또는 그 외의 데이터 속성)가 필요합니다.

이것은 당신이 사용할 수 있는 좋은 해결책입니다.v-for필요에 따라 스타일 콘텐츠를 생성하는 루프(구성 요소 데이터/소품/소품 변경에 반응할 수 있음)

<component is="style" type="text/css">
  <template v-for="item in items">
    [data-id="{{ uniqueId }}"] div.bar[data-div-id="item.id"]::before {
      content: "{{ item.content }}";
      color: {{ item.color }};
    }
  </template>
</component>

방금 계산 속성을 생성하여 템플릿에서 v-html로 사용했습니다.

<div v-html="css"></div>

computed: {
    css () {
        return `<style>${this.item.css}</style>`
    }
}

언급URL : https://stackoverflow.com/questions/49516424/use-style-tags-inside-vuejs-template-and-update-from-data-model