vue to add content to the page input box (simple message board)

Article Address: https://www.cnblogs.com/sandraryan/

vue most simple demo (remember the introduction)

Examples of a VUE, #app the binding element, to be rendered as an array arr data.

Arr rendering of the item to the page, click the button to add the contents of the input content input by the user to a page and array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>click to add input's content</p>
    <input id="inp" type="text">
    <button id="btn">add</button>
    <div v-for = 'item in arr'>{{item}}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.0.1/vue.js"></script>
<script>
    const test = new Vue({
        el :'#app',
        data : {
            arr : ['first','second','third','forth']
        }
    });
    console.log(test.arr);
    btn.onclick = function(){
      test.arr.push(inp.value);
    };
</script>
</body>
</html>

 

Click the button typing in the input box, the content will render to the page. At the same time increases the element of the array

 

Guess you like

Origin www.cnblogs.com/sandraryan/p/11833933.html