vue.js基础（2）-列表与处理用户输入

作者: d33911380280 | 来源:发表于2016-11-03 19:42 被阅读408次

vue.js基础（2）-列表与处理用户输入
【基础】处理用户输入
python-用户输入和while循环 2019-06-16
Java NIO
Python基础代码的学习
Vue.js整理笔记 ——入门篇
JavaScript事件处理
处理用户输入
RN的&&在文本输入中的应用
Python 输入与输出

例子基于上一节，对列表以及处理用户输入的两个案例进行总结。
（1）列表
首先在html页面中，改写为如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue1</title>
    <script type="text/javascript" src="../src/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
       <ul>
          <li v-for="person in persons">
           {{ person.name }} loves {{person.love}}
          </li>
       </ul>
        <input type="text" name="message" v-model="message" />
    </div>
    <script type="text/javascript" src="../src/js/vue1.js"></script>
</body>
</html>

var app = new Vue({
    el: '#app',
    data: {
        message: "hello world",
persons: [
    {name: "huhx", love: "code"},
    {name: "chenhui", love: "book"}
]
    }
});

（2）处理用户输入
处理用户输入主要依靠v-on。
在html中增加一行。

<button v-on:click="changeContent('huhx')">点击!</button>

在vue1.js中增加method部分。

var app = new Vue({
    el: '#app',
    data: {
        message: "hello world",
persons: [
    {name: "huhx", love: "code"},
    {name: "chenhui", love: "book"}
]
    },
    methods:{
        changeContent:function(element){
            this.message="i love"+element;
        }
    }
});