Question

我有一个改变图像对比度和亮度的小提琴。

当我尝试将其作为.vue组件添加到我的网站时，滑块不再影响图像。我知道问题出在我的过滤功能上。我只是无法理解为什么我的：style属性没有将更改应用于我元素。

我做错了什么/没有得到？

小提琴有用 - https://jsfiddle.net/BBMAN/fxtrtqpj/14/

我的.vue组件的代码不起作用。

<template>
  <div class="brightness-slider container">
    <h1>{{ msg }}</h1>
    <h2>Built using Vue.js</h2>
     <div class="row">
        <div class="col-md-10">
          <img ref="img" class="img img-responsive" :style="filters" />
        </div>
        <div class="col-md-2">
          <strong>Contrast ({{contrast}})</strong>
          <input class="slider vertical" type="range" orient="vertical" v-model="contrast" max="1" min="0" step="0.01" />
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h4>
            <strong>Brightness ({{brightness}})</strong>
          </h4>
          <input class="slider horizontal" type="range" v-model="brightness" max="3" min="0" step="0.01" />
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'ImageBrightnessSlider',
    data() {
      return {
        //sending data to view.
        msg: 'Audience Republic Brightness Modifier',
        brightness: 1,
        contrast: 1
      }
    },computed: {
    filters() {
      const toDash = (str) => str.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase()
      debugger;
      return { filter: Object.entries(this._data).filter(item => typeof(item[1]) !== 'object').map(item => `${toDash(item[0])}(${item[1]})`).join(' ') }
    }
  },
    mounted() {
      this.$refs.img.src = require('../assets/pleasure-garden-1200-by-768.jpg')           
    }    
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;    
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
  input[type=range][orient=vertical]{
      writing-mode: bt-lr; /* IE */
      -webkit-appearance: slider-vertical; /* WebKit */
      width: 8px;
      height: 100%;
      padding: 0 5px;
  }
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 5px;   
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}
</style>

Answer 1

＆＃34;小提琴起作用＆＃34; =不正确

您正在尝试将HTML CSS JavaScript推入Javascript！解释器Javascript不懂HTML CSS！

您的代码必须类似于this

的index.html

<div id="App">
<!-- HTML code -->
</div>

<script>
// js code
</script>

<style scoped>
/* css code */
</style>

您有很多错误，请参阅official documentation

另外，您可以看到我的vue examples

更新： SFC示例

如何将我的vue转换为component.vue

1 个答案: