Vue

by Mariya_Korotkova

HTML

<div id="app">
 
  <input v-model.lazy="name" type="text">
  <p>Имя: {{name}}</p>
  <div style="marginBottom: 20px">
  <label for="one">One</label>
  <input type="checkbox" id="one" value="One" v-model="checkedValues">
  
  
  <label for="two">Two</label>
  <input type="checkbox" id="two" value="Two" v-model="checkedValues">
  
  <label for="three">Three</label>
  <input type="checkbox" id="three" value="Three" v-model="checkedValues">
  
  <p>checkedValues: {{ checkedValues }}</p>  
  </div>
  
  <div style="marginBottom: 20px">
  <input type="radio" id="apple" value="Apple" v-model="pickedValue">
  <label for="apple">Apple</label>
  
  <input type="radio" id="lemon" value="Lemon" v-model="pickedValue">
  <label for="lemon">Lemon</label>
  
  <input type="radio" id="pineapple" value="Pineapple" v-model="pickedValue">
  <label for="pineapple">Pineapple</label>
  
  <p>Выбранный фрукт: {{pickedValue}}</p>
  </div>
  
  <div>
  <select v-model="selectedValue">
    <option disabled value="">Выберите один вариант</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>
  
  <p>
  Выбранный select: {{selectedValue}}
  </p>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    checkedValues: [],
    pickedValue: '',
    selectedValue: "",
    name: ""
  }
})