기초

by duckduck0054

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://unpkg.com/vue"></script>
  <title>JS Bin</title>
  <style>
    [v-cloak] { display: none;}
  </style>
</head>

<body>

  <div id="simple">
    <h2>{{ message }}</h2>
  </div>
  <hr>
  
  <div id="simple_text_html">
    <span v-text="message">
    //v-text를 v-html로 변경해볼 것.
  </div>
  <hr>
    
  <div id="simple_image">
    <input type="text" id="a" v-bind:value="message"><br>
    <img v-bind:src="imagePath" alt="">
  </div>
  <hr>
    
  <div id="simple_model">
    <input type="text" v-model="name">
    입력된 이름 : <h5 v-html="name"></h5>
  </div>
  <hr>
    
  <div id="simple_check_1">
      <div>좋아하는 과일을 모두 골라주세요 : </div>
      <input type="checkbox" value="1" v-model="fruits">사과,
      <input type="checkbox" value="2" v-model="fruits">키위,
      <input type="checkbox" value="3" v-model="fruits">포도,
      <input type="checkbox" value="4" v-model="fruits">수박,
      <input type="checkbox" value="5" v-model="fruits">참외
  </div>

  <div id="simple_check_2">
      선택한 과일들 : <span v-html="fruits"></span>
  </div>
  <hr>
  
  <div id="simple_if">
    영화 평점:: <input type="text" v-model="amount">
    <img src="../img/error.png" v-if="amount<0" title="마이너스는 허용하지 않습니다." style="width: 15px; height:15px; vertical-align:middle">
    <img src="../img/error.png" v-else-if="amount<10" title="평점 10점 기준" style="width: 15px; height:15px; vertical-align:middle">
    <img src="../img/error.png" v-else="10<amount" title="평점은 10을 넘길 수 없습니다." style="width: 15px; height:15px; vertical-align:middle">
  </div>
  <hr>
  
  <div id="app">
    <ul>
      <li v-for="car in cars">
        {{car.name}}: {{car.brand}}
      </li>
    </ul>
    <input type="text" v-model="car.name" placeholder="차 이름"/>
    <input type="text" v-model="car.brand" placeholder="차 브랜드"/>
    <button v-on:click="add">추가</button>
  </div>
  <hr>
  <div id="app_search">
    <input type="text"...