全站公告

blackcat是国内优秀的WordPress主题开发团队,专注WordPress主题开发建站, UI设计,seo等服务;并提供有保障的维护及售后。

我已了解

Vue学习基础2

前端组件用法:
v-modal绑定数据
v-on事件绑定
v-for循环
methods事件内容绑定
push方法将输入框的数据push到列表list中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="app">
<!--        v-modal绑定数据-->
        <input type="text" v-model="inputValue">
<!--        v-on事件绑定-->
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
<!--            v-for循环li-->
<!--            item in list将list的内容放入item中-->
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:[],
                inputValue:''
            },
            methods:{
                handleBtnClick:function () {
                    this.list.push(this.inputValue) //将输入框的数据push到列表list中
                    this.inputValue = ''
                }
            }
        })
    </script>
</body>
</html>
1
扫码分享到微信
Vue学习基础2
评论 0
退出

搜索一下可能来得更快
搜索
搜索
搜索