lustan3216

todos.length ? (
  <ul>
    { todos.forEach(todo => todo && <li>{todo}</li>) }
  </ul>
           ) : (
  <p>No todos left!</p>
)

lustan3216

<ul v-if="todos.length">
  <li v-for="todo in todos" v-if="todo"> // v-if here just for example to compare, although official not recommend like this
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

lustan3216

<template>
  <p 
    class="foo" 
    :class="align" 
    :style="color: fontColor"
  >
    {{name}}
  </p>
</template>
<script>

lustan3216

render(){
  const { fontColor, align } = this.props
  const { name } = this.state

  return (
    <p 
      className={`${fontColor} ${align} foo`} 
      style="color: fontColor"
    >
      {name}

lustan3216

<template>
  <p>{{slogan}}</p>
</template>

<script>
  props:['middName'],
  data: {
    firstName: 'I', 
    lastName: 'Cat'
  },

lustan3216

<!-- the click events propagation will be stopped -->
<a @click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>

<!-- just the modifier -->

lustan3216

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

lustan3216

<template>
  <div>
    <select v-model="selected" multiple>
      <option>Grapefruit</option>
      <option>Lime</option>
      <option>Coconut</option>
      <option>Mango</option>
    </select>
    <span>Select value: {{ selected }}</span>

lustan3216

class Select extends React.Component { 
  state = {
    selected: [],
    fruits: [   
        {value: "banana", isChecked: false},
        {value: "apple", isChecked: false},
        {value: "mango", isChecked: false},
        {value: "grap", isChecked: false}
    ]    
  };

lustan3216

<template>
  <a class="primary">GitHub</a>
</template>

<style scoped>   
  a {
    background: transparent;
    color: white;
  }
  a.primary {