VUE 入門 1 列表、if判斷、雙向綁定

時間 2019-11-17

標籤 vue 入門列表判斷雙向綁定简体版

原文原文鏈接

聲明式渲染

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：html

【1】vue

<script src="js/vue.min.js"></script>
</head>

<body>

    <div id="app">
      <p>{{ message }}</p>
    </div>

    <script>
        new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue.js!'
          }
        })
    </script>
</body>

頁面顯示：app

【2】 list v-foride

    <div id="app">
      <ul>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ul>
    </div>

    <script>
        new Vue({
          el: '#app',
          data: {
              todos: [
              { text: 'Learn JavaScript' },
              { text: 'Learn Vue.js' },
              { text: 'Build Something Awesome' }
            ]
          }
        })
    </script>

列表加索引ui

索引indexspa

    <div id="app">
      <ul id="example-2">
        <li v-for="item,index in items">
          {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
      </ul>
    </div>

    
    <script>
        var example2 = new Vue({
          el: '#example-2',
          data: {
              parentMessage: 'nba',
              items: [
              { message: 'www.runoob.com' },
              { message: 'www.runoob.com' }
            ]
          }
        })
    </script>

【3】判斷 v-if3d

    <div id="app-3">
      <p v-if="seen">如今你看到我了</p>
    </div>

    <script>
        new Vue({
          el: '#app-3',
          data: {
            seen: true
          }
        })
    </script>

true 可見 false 不可見雙向綁定

【4】雙向綁定code

    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>

    <script>
        new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue.js!'
          }
        })
    </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

VUE 入門 1 列表、if判斷 、雙向綁定

聲明式渲染

VUE 入門 1 列表、if判斷、雙向綁定