0

我有一个简单的 Vue.JS 示例来模拟人们玩彩票。我输入球员的名字，推入一个列表并让他们在屏幕上列出最后，我找到从列表中选择的获胜者。我想将其更改为面向对象的示例。我想要一个具有两个属性的播放器对象；Name Amount（玩过的金额） 所以我应该有两个输入框，并且 ADD 按钮应该在玩家列表中添加一个玩家对象。

这是我的代码

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link href="https://fonts.googleapis.com/css?family=Anton|Roboto:300,400,500" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <title>Who pays the bill</title>
</head>
<style>
   body {
font-family: 'Roboto', sans-serif;
padding:0;
margin:0;
}

a {
text-decoration: none;
color:#ffffff;
}

.container {
min-height: 300px;
width: 360px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

h1 {
color: #2196F3;
font-size: 40px;
text-align: center;
}

.input_container {
display: flex;
}
input:focus{
outline: none;
}
input {
flex-grow: 1;
border: 1px solid #dddddd;
background: #f2f2f2;
font-size: 20px;
border-radius: 5px 0px 0px 5px;
padding: 10px;
box-sizing: border-box;
}

button {
border-radius: 0px 5px 5px 0px;
background: #2196F3;
color: #ffffff;
font-size: 16px;
padding: 10px;
box-sizing: border-box;
}

.list_of_names {
padding: 10px 0px;
cursor: pointer;
}

.list_of_names div {
margin-right: 10px;
margin-bottom: 10px;
background: #2196F3;
color: #ffffff;
display: inline-block;
padding: 5px 10px;
border-radius: 15px;
}

.error_message {
color: #F44336;
font-weight: 600;
text-align: center;
margin-top: 10px;
}

.action_button {
cursor: pointer;
border: 1px solid #607D8B;
color: #607D8B;
font-size: 16px;
width: 200px;
text-align: center;
padding: 10px;
border-radius: 11px;
margin: 0 auto;
}

.action_button:hover {
background: #607D8B;
color:#ffffff;
}

.result_value {
font-size: 70px;
color: #607D8B;
font-weight: 600;
text-align: center;
margin-bottom: 20px;
}
</style>

<body>

   <div id="app">

      <div id="names" class="container" v-if="state">
         <h1>Who Wins The Lottery?</h1>
         <div class="input_container">
            <input type="text" v-model="inputName">
            <button @click="addNameToList">ADD</button>
         </div>
         <div class="error_message" v-if="showError">
            Please enter a name !!!
         </div>
         <div class="list_of_names">
            <div v-for="(name,index) in names" :key="index" @click="removeName(index)">
               {{ name }}
            </div>
         </div>
         <div v-if="names.length > 1">
            <div class="action_button" @click="showResults">
               Check the winner
            </div>
         </div>
      </div>
      <div id="result" class="container" v-if="!state">
         <div class="result_container">
            <h1>The winner is:</h1>
            <div class="result_value">{{ result }}</div>
            <div class="action_button" @click="resetApp">
               Start again
            </div>

         </div>

      </div>
   </div>

</body>


<script>
   new Vue({
      el: '#app',
      data: {
         state: true,
         inputName: '',
         names: [],
         showError: false,
         result: ''
      },
      methods: {
         addNameToList() {
            if (this.validate(this.inputName)) {
               this.names.push(this.inputName);
               this.inputName = '';
               this.showError = false;
            } else {
               this.showError = true;
            }
         },
         removeName(index) {
            this.names.splice(index, 1);
         },
         validate(value) {
            if (value !== '') {
               return true
            } else {
               return false
            }
         },
         showResults() {
            let rand = this.names[Math.floor(Math.random()*this.names.length)]
            this.result = rand;
            this.state = false
         },
         resetApp() {
            this.state = true;
            this.names = [];
            this.result = ''
         }
      }
   })
</script>

</html>

我试过这个，但它不起作用

  <div id="names" class="container" v-if="state">
    <h1>Who Wins The Lottery?</h1>
    <div class="input_container">
      Name: <input type="text" v-model="Player.inputName" />
    </div>
    <br />
    <div class="input_container">
      Amount: <input type="text" v-model="Player.inputAmount" />
    </div>
    <br />
    <div class="input_container">
      <button @click="addNameToList">ADD</button>
    </div>

有了这个 javascript

new Vue({
  el: "#app",
  data: {
    state: true,
    Player={
       inputName: "",
       InputAmount,
    },
    //inputName: "",
    Players: [],
    showError: false,
    result: ""
  },
  methods: {
    addNameToList() {
      //if (this.validate(this.Player.inputName)) 
      alert(this.Player.inputName);
        this.names.push(this.Players.player);

        this.Player.inputName = "";
        this.Player.InputAmount = "";


    },
    removeName(index) {
      this.names.splice(index, 1);
    },

我想问题出在 v-model 指令中。是否可以对对象进行 v-model 建模，使一堆 HTML 字段对应于数据对象的属性？有任何想法吗？

4

0 回答 0