我為 vue 3 設定了一些演示代碼，用于將行內樣式更新為計算物件，但它沒有更新。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="main.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.min.js"></script>
</head>
<body>
<div id="map">
<div id="infantry" class="unit" :style="style">
Position: {{ x }} {{ y }}
</div>
</div>
<script>
const Infantry = {
data() {
return {
x: 0,
y: 0
}
},
mounted() {
setInterval(() => {
this.x ;
this.y ;
}, 1000);
},
computed : {
style() {
return {
top : this.x
};
}
}
}
Vue.createApp(Infantry).mount('#infantry');
</script>
</body>
</html>
這部分不起作用
:style="style"
我檢查了 dom，它沒有設定要使用的樣式top。有誰知道怎么了？
uj5u.com熱心網友回復：
問題是您系結了掛載 vue 應用程式的元素的屬性，然后添加px到回傳的最高值：
.unit {
position: absolute
}<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="main.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.min.js"></script>
</head>
<body>
<div id="map">
<div class="unit" :style="style">
Position: {{ x }} {{ y }}
</div>
</div>
<script>
const Infantry = {
data() {
return {
x: 0,
y: 0
}
},
mounted() {
setInterval(() => {
this.x ;
this.y ;
}, 1000);
},
computed: {
style() {
return {
top: this.x "px"
};
}
}
}
Vue.createApp(Infantry).mount('#map');
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/402902.html
標籤：
上一篇：使用vuejs更改變數的值
下一篇：Vue3多個Highcharts