vue学习2

条件与循环

v-if判断使用 ：控制元素是否显示

        <div id="app-3">
            <p v-if="seen">vue是否显示</p>
        </div>

var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: true
    }
})

v-for循环使用：

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

var app4 = new Vue({
    el: '#app-4',
    data:{
        todos: [
            { text: '学习javascript'},
            { text: '学习vue'},
            { text: '开发项目'}
        ]
    }
})

处理用户输入

v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

        <div id="app-5">
            <p>{{ message}}</p>
            <button v-on:click="reverseMessage">反转消息</button>
        </div>

var app5 = new Vue({
    el:'#app-5',
    data:{
        message: 'Hello Vue!!!'
    },
    methods:{
        reverseMessage: function(){
            this.message = this.message.split('').reverse().join('')
        }
    }
})

v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。

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

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!-6'
  }
})