我正在使用与输入字段双向绑定的vue组件。
我想在输入字段视图中仅将+ - 和%符号附加到此值。我不想更改实际值,因为这会导致组件出现问题。
以下是我要找的内容:
这就是我所拥有的:
使用此代码:
spark-submit --properties-file spark.conf ...
------------------ UPDATE -------------------
根据以下答案,使用计算属性。
好:
不好
所以我需要双向工作
答案 0 :(得分:1)
要使另一个值始终形成计算属性:
new Vue({
el: '#app',
data: {
value: {value: 0},
// ..
},
computed: {
readableValue() {
return (this.value.value => 0 ? "+" : "-" ) + this.value.value + "%";
}
}
})
为了得到你想要的东西,我们必须用两个输入做一个小技巧。因为您希望用户在<input type="number">
中进行修改,但又想展示+15%
中无法显示的<input type="number">
(因为+
和%
不是数字)。所以你必须做一些展示/隐藏,如下所示:
new Vue( {
el: '#app',
data () {
return {
editing: false,
value: {value: 0},
}
},
methods: {
enableEditing() {
this.editing = true;
Vue.nextTick(() => { setTimeout(() => this.$refs.editor.focus(), 100) });
},
disableEditing() {
this.editing = false;
}
},
computed: {
readableValue() {
return (this.value.value > 0 ? "+" : "" ) + this.value.value + "%";
}
},
components: {
'vueSlider': window[ 'vue-slider-component' ],
}
})
/* styles just for testing */
#app { margin: 10px; }
#app input:nth-child(1) { background-color: yellow }
#app input:nth-child(2) { background-color: green }
<div id="app">
<input :value="readableValue" type="text" v-show="!editing" @focus="enableEditing">
<input v-model.number="value.value" type="number" ref="editor" v-show="editing" @blur="disableEditing">
<br><br><br>
<vue-slider v-model="value.value" min="-20" max="20">></vue-slider>
</div>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
<script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>