VueTest/index.html at master · yutingzou/VueTest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      You can add example videos like these to your list:
      <ul>
        <li>https://www.youtube.com/embed/lY2yjAdbvdQ</li>
        <li>https://www.youtube.com/embed/dT2owtxkU8k</li>
        <li>https://www.youtube.com/embed/hT_nvWreIhg</li>
      </ul>

      Title: <input v-model="newTitle" size="50" placeholder="edit me" /><br />
      URL:
      <input
        v-model="newUrl"
        size="50"
        placeholder="https://www.youtube.com/embed/iWZmdoY1aTE"
      /><br />
      <button @click="addVideo">Add another video</button> <br />
      <br />
      Videos<br />
      <span v-for="video in videos">
        <iframe
          :src="video.url"
          width="300"
          height="200"
          v-if="video.show"
        ></iframe
        ><br />
        {{video.title}}

        <button @click="video.show=false" v-show = "video.show">Hide</button>

        <button @click="video.show=true" v-show = "!video.show">Show</button>

        <button @click="deleteVideo(video)">Delete</button></br>

      </span>
      <! -- Exercise:
         Only show the hide button when the video is shown.
	       Only show the show button when the video is hidden.
      -->
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
    <script></script>
  </body>
</html>