VUE 入门 1 列表、if判断 、双向绑定

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

 【1】

<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>

页面显示：

【2】 list v-for

    <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>

列表 加索引

索引index

    <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-if

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

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

true 可见 false 不可见

 

【4】双向绑定

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

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

 

posted @ 2018-04-12 16:06  lyon♪♫  阅读(166)  评论(0)  编辑  收藏  举报