Vue Sample 1

by Christian Mueller

HTML

<div id="start">

  <h1 v-bind:style='{ color: redcolor ? "red" : "black" }'>{{title}}</h1>
  
  <div>
      Eingabe:
      <input v-model='title'/>
  </div>
  <div>
      Rote Farbe
      <input type='checkbox' v-model='redcolor'/>
  </div>
  <br/>
  <div>
    Stil:
    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>Normal</option>
      <option>Grün</option>
      <option>Blau</option>
    </select>
  </div>
  <div :class="selected">
    Das ist ein kleiner Beispieltext mit wechselbaren Style.
  </div>
  <br/>
  <div>
    Farbaswahl: <input type="color" v-model="inputcolor"/>
  </div>
  
  <div :style="{color: inputcolor}">
    Das ist text in der definierten Eingabefarbe
  </div>
  <br/>
  <div>
    Your Messagetext:<br/>
    <textarea v-model="messageText">
      
    </textarea>
  </div>
  <br/>
  <div>
    Checkbox single:
    <input type="checkbox" v-model="isSwitched" name="hallo"/>
    <br>
    Checked {{ isSwitched ? "Ja" : "Nein"}}
  </div>
  <br/>
    Select multiple colors:
    <label><input type="checkbox" v-model="colsel" value="red">Red</label>
    <label><input type="checkbox" v-model="colsel" value="green">Green</label>
    <label><input type="checkbox" v-model="colsel" value="blue">Blue</label>
    <label><input type="checkbox" v-model="colsel" value="yellow">Yellow</label>
  <br/>
  Selected is {{ colsel }}
  <br/><br/>
  <div>
    Select one of this radio options:
    <label><input type="radio" v-model="drink" value="beer">Beer</label>
    <label><input type="radio" v-model="drink" value="wine">Wine</label>
    <label><input type="radio" v-model="drink" value="water">Water</label>
  </div>
  <br>
  <div>
    <label>Trim Spaces Automatically:<input type="text" v-model.trim="inptrim"></label>
    <br/>This is the Content: [{{inptrim}}]
    <br/>
    <label>Enter some Number please:<input type="number" v-model.number="inpnumber"></label>
    <br/>This is the number: {{inpnumber}}
  </div>
</div>

CSS

.Normal {
  color: yellow;
  background-color: black;
}
.Grün {
  color: green;
  font-weight: bold;
}

.Blau {
  color: white;
  background-color: blue;
  font-style: italic;
}

JavaScript

var vue = new Vue({
	el: '#start',
  data: {
  	title: 'Hallo Welt!',
    redcolor: false,
    selected: 'Normal',
    inputcolor: 'black',
    messageText: 'Your text here...',
    isSwitched: true,
    drink: "water",
    colsel: ['yellow', 'green'],
    inptrim: '',
    inpnumber: 0
  }
});
vue.title="Test"