编写缺失的代码,以便观察者在值低于 40 时激活警告类别。
<div id="app">
<input type="range" v-model="rangeVal">
<p :class="{ warnClass: warnActive }"><code>{{ rangeVal }}</code></p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
rangeVal: 70,
warnActive: false
}
},
watch: {
@(13) {
if(val<40){
this.warnActive = true;
}
else{
this.warnActive = false;
}
}
}
})
app.mount('#app')
</script>
<div id="app">
<input type="range" v-model="rangeVal">
<p :class="{ warnClass: warnActive }"><code>{{ rangeVal }}</code></p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
rangeVal: 70,
warnActive: false
}
},
watch: {
rangeVal(val) {
if(val<40){
this.warnActive = true;
}
else{
this.warnActive = false;
}
}
}
})
app.mount('#app')
</script>