Привязки Vue и CSS в HTML не работают


Привязки Vue и CSS в HTML не работают

20.11.2020 05:12:37 Просмотров 51 Источник

Я пытаюсь отобразить vue в HTML-файле. Он правильно работал с vue cli, но теперь, когда я пытаюсь интегрировать его в голый HTML-файл, CSS больше не работает должным образом. С таким же успехом это может быть связано с привязками vue, так как показанный бар должен повторяться три раза, но показывается только один раз. Я не получаю никаких ошибок в консоли, так что я ничего не знаю. Любая помощь приветствуется!

результат HTML-код в банкомате

как это выглядело с vue cli

<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>

javascript html vue.js
У вопроса есть решение - Посмотреть?

Ответы - Привязки Vue и CSS в HTML не работают / Vue bindings and CSS in HTML does not work

Является ответом!
Boussadjra Brahim

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>

Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X