Привязки Vue и CSS в HTML не работают
Я пытаюсь отобразить vue в HTML-файле. Он правильно работал с vue cli, но теперь, когда я пытаюсь интегрировать его в голый HTML-файл, CSS больше не работает должным образом. С таким же успехом это может быть связано с привязками vue, так как показанный бар должен повторяться три раза, но показывается только один раз. Я не получаю никаких ошибок в консоли, так что я ничего не знаю. Любая помощь приветствуется!
результат HTML-код в банкомате
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<title>vue demo</title>
<style type="text/css">
html,
#app{
font-family: Helvetica;
text-align: center;
line-height: 1;
background-color: rgb(221, 229, 230);
width: 300px;
margin-left: auto;
margin-right: auto;
}
body {
margin: 0;
padding: 0;
}
.switch {
background: rgb(255, 255, 255);
padding: 4px;
white-space: nowrap;
display: inline-block;
margin: 4px;
width: 30px;
height: 30px;
text-align: center;
background-repeat: no-repeat;
background-size: 100%;
vertical-align: middle;
margin-right: 20px;
}
.switch.closed {
background-image: url(switch-closed.svg);
background-position: 0px 0px;
}
.switch.opened {
background-image: url(switch-opened.svg);
background-position: 0px -4.5px;
}
.switchBar {
background-color: rgb(102, 34, 25);
margin: 22px;
border: solid 2px rgb(66, 4, 4);
width: 200px;
margin-left: auto;
margin-right: auto;
}
.button {
color: lightblue;
padding: 5px;
margin: 2px;
background: rgb(0, 0, 0);
display: inline-block;
border-radius: 8px;
cursor: pointer;
border: 2px solid rgb(0, 0, 0);
position: left;
}
h1 {
margin: 40px 0 0;
color: #8a032c;
}
</style>
</head>
<div>
<fieldset>
<h1>simTest server</h1>
<hr>
<div>
<div v-for="(str, index) in switchObj" v-bind:key="str">
<div class="switchBar">
<div class="switch" v-bind:class="{ closed: this.switchObj[index]==='closed', opened: this.switchObj[index]==='opened' }" @click="onSwitchClick(index)"></div>
<div class=" button" @click="onClickClose(index)">close</div>
<div class="button" @click="onClickOpen(index)">open</div>
</div>
</div>
</div>
</fieldset>
</div>
<script>
const app = new Vue({
name: '#app',
data () {
return {
switchObj: {'K1': 'opened', 'K2': 'opened', 'K3': 'opened'}
}
},
methods: {
// ONLY for closing relay Button
onClickClose (myIndex) {
if (this.switchObj[myIndex] === 'closed') {
console.log('onClickClose: Switch ' + myIndex + ' is already closed.')
} else if (this.switchObj[myIndex] === 'opened') {
this.switchObj[myIndex] = 'closed'
console.log('onClickClose: Switch ' + myIndex + ' is now closed.')
} else {
console.error('Unknown paramter/s', myIndex)
}
},
// ONLY for opening relay Button
onClickOpen (myIndex) {
if (this.switchObj[myIndex] === 'opened') {
console.log('onClickClose: Switch ' + myIndex + ' is already opened.')
} else if (this.switchObj[myIndex] === 'closed') {
this.switchObj[myIndex] = 'opened'
console.log('onClickClose: Switch ' + myIndex + ' is now opened.')
} else {
console.error('Unknown paramter/s', myIndex)
}
},
// opening AND closing relay by clicking on the image
onSwitchClick (myIndex) {
if (this.switchObj[myIndex] === 'closed') {
this.switchObj[myIndex] = 'opened'
console.log('onClickClose: Switch ' + myIndex + ' is now opened.')
} else if (this.switchObj[myIndex] === 'opened') {
this.switchObj[myIndex] = 'closed'
console.log('onClickClose: Switch ' + myIndex + ' is now closed.')
} else {
console.error('Unknown paramter/s', myIndex)
}
}
}
})
</script>
</html>
Ответы - Привязки Vue и CSS в HTML не работают / Vue bindings and CSS in HTML does not work

20.11.2020 05:22:41
Добавьте атрибут id
с app
в качестве значения в корневом div, затем в экземпляре vue установите el:"#app"
вместо name:"#app"
и установите key
в индекс v-bind:key="index"
, наконец
, замените v-bind:class="{ closed: this.switchObj[index]==='closed', opened: this.switchObj[index]==='opened' }"
на v-bind:class="{ closed: str==='closed', opened: str==='opened' }"
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<title>vue demo</title>
<style type="text/css">
html,
#app{
font-family: Helvetica;
text-align: center;
line-height: 1;
background-color: rgb(221, 229, 230);
width: 300px;
margin-left: auto;
margin-right: auto;
}
body {
margin: 0;
padding: 0;
}
.switch {
background: rgb(255, 255, 255);
padding: 4px;
white-space: nowrap;
display: inline-block;
margin: 4px;
width: 30px;
height: 30px;
text-align: center;
background-repeat: no-repeat;
background-size: 100%;
vertical-align: middle;
margin-right: 20px;
}
.switch.closed {
background: #ee4445;
background-position: 0px 0px;
}
.switch.opened {
background: #44ee45;
background-position: 0px -4.5px;
}
.switchBar {
background-color: rgb(102, 34, 25);
margin: 22px;
border: solid 2px rgb(66, 4, 4);
width: 200px;
margin-left: auto;
margin-right: auto;
}
.button {
color: lightblue;
padding: 5px;
margin: 2px;
background: rgb(0, 0, 0);
display: inline-block;
border-radius: 8px;
cursor: pointer;
border: 2px solid rgb(0, 0, 0);
position: left;
}
h1 {
margin: 40px 0 0;
color: #8a032c;
}
</style>
</head>
<div id="app">
<fieldset>
<h1>simTest server</h1>
<hr>
<div>
<div v-for="(str, index) in switchObj" v-bind:key="index">
<div class="switchBar">
<div class="switch" v-bind:class="{ closed: str==='closed', opened: str==='opened' }" @click="onSwitchClick(index)">{{index}}</div>
<div class=" button" @click="onClickClose(index)">close</div>
<div class="button" @click="onClickOpen(index)">open</div>
</div>
</div>
</div>
</fieldset>
</div>
<script>
const app = new Vue({
el: '#app',
data () {
return {
switchObj: {'K1': 'opened', 'K2': 'opened', 'K3': 'opened'}
}
},
methods: {
// ONLY for closing relay Button
onClickClose (myIndex) {
if (this.switchObj[myIndex] === 'closed') {
console.log('onClickClose: Switch ' + myIndex + ' is already closed.')
} else if (this.switchObj[myIndex] === 'opened') {
this.switchObj[myIndex] = 'closed'
console.log('onClickClose: Switch ' + myIndex + ' is now closed.')
} else {
console.error('Unknown paramter/s', myIndex)
}
},
// ONLY for opening relay Button
onClickOpen (myIndex) {
if (this.switchObj[myIndex] === 'opened') {
console.log('onClickClose: Switch ' + myIndex + ' is already opened.')
} else if (this.switchObj[myIndex] === 'closed') {
this.switchObj[myIndex] = 'opened'
console.log('onClickClose: Switch ' + myIndex + ' is now opened.')
} else {
console.error('Unknown paramter/s', myIndex)
}
},
// opening AND closing relay by clicking on the image
onSwitchClick (myIndex) {
if (this.switchObj[myIndex] === 'closed') {
this.switchObj[myIndex] = 'opened'
console.log('onClickClose: Switch ' + myIndex + ' is now opened.')
} else if (this.switchObj[myIndex] === 'opened') {
this.switchObj[myIndex] = 'closed'
console.log('onClickClose: Switch ' + myIndex + ' is now closed.')
} else {
console.error('Unknown paramter/s', myIndex)
}
}
}
})
</script>
</html>