我一直在嘗試在 watch 部分使用 document.getElementById("hoge").style.color 但它不能正常作業。下面的代碼使用 selected_title_color1 被更改執行，然后將 titleColor1 添加到 p-modal 的樣式中。我確定 titleColor1 獲得了我想要的價值，但 document.getElementById("p-modal").style.color = titleColor1 看起來不起作用。
data () {
return {
colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'],
colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'},
selected_title_color1:'',
}
}
watch:{
selected_title_color1: function () {
var titleColor0 = this.selected_title_color1;
var titleColor1 = this.colors_dic[titleColor0];
console.log(titleColor1)
document.getElementById("p-modal").style.color = titleColor1
}
},
uj5u.com熱心網友回復：
您可以使用Class 和 Style Bindings來實作這一點，如下所示：
new Vue({
el: "#app",
data() {
return {
colors: ['紅色', '藍色', '黃色', '粉色', '土地色', '水藍色', '灰色', '淺綠色', '橙色'],
colors_dic: {
紅色: 'red',
藍色: 'blue',
黃色: 'yellow',
粉色: 'pink',
土地色: 'blawn',
水藍色: 'aqua',
灰色: 'gray',
淺綠色: 'palegreen',
橙色: 'orange'
},
selected_title_color1: '',
titleColor1: '',
}
},
watch: {
selected_title_color1: function() {
this.titleColor1 = this.colors_dic[this.selected_title_color1];
}
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
Select Color:
<select v-model="selected_title_color1">
<option v-for="color in colors" :value="color">{{color}}</option>
</select>
<br/><br/>
<span :style="{ color : titleColor1 }">Toggle the dropdown to change the text color...</span>
</div>uj5u.com熱心網友回復：
您應該使用“ref”來訪問 Vue 中的 dom 元素：
<template>
<div>
<div ref="test">
test
</div>
</div>
</template>
<script>
export default {
name: 'Test',
data () {
return {
test: 'test'
}
},
watch: {
test () {
const colors = [
'red',
'green',
'blue',
'purple',
'pink'
]
this.$refs.test.style.color = colors[Math.floor(Math.random() * colors.length)]
}
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/406883.html
標籤：
上一篇：將道具傳遞給Vue中的停用組件