美文网首页Vue.js专区Web 前端开发
[ vue.js ] 新建一个todolist

[ vue.js ] 新建一个todolist

作者: 歪歪1993 | 来源:发表于2018-07-05 10:05 被阅读10次
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- 设置初始缩放比例为1.0,使用设备宽度  -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
        <!-- 在iOS下开启全屏模式  -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!-- 隐藏 Sarafi 状态栏  -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            list:[],
            inputValue:''
        },
        methods:{
            handleBtnClick:function(){
                this.list.push(this.inputValue)
                this.inputValue=""
            }
        }
    })
</script>
</html>

相关文章

网友评论

    本文标题:[ vue.js ] 新建一个todolist

    本文链接:https://www.haomeiwen.com/subject/uyvuuftx.html