[Vue] 3.数据的循环展示 + todoList功能

weiweicn!

已于 2022-05-25 16:33:00 修改

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-05-24 09:58:55 首次发布

本文链接：https://blog.csdn.net/u014627255/article/details/124929278

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、数据的循环展示

定义data中的数据

data() {
                return {
                    list: ['hello', 'world', 'adam', 'xin']
                }
            },

循环数据：v-for

template: `
            <ul>
                <li v-for="(item, index) of list">{{item}}-{{index}}</li>
            </ul>
            `

二、制作todoList

增加按钮绑定事件：

<button v-on:click="handleAdditem">增加</button>

定义一个输入框，绑上变量：用v-model绑变量

data() {
                return {
                    inputValue: '',
                    list: []
                }
            },

<input v-model="inputValue/>

点击事件函数

methods: {
                handleAdditem() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            },

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        Vue.createApp({
            data() {
                return {
                    inputValue: '',
                    list: []
                }
            },
            methods: {
                handleAdditem() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            },
            template: `
            <div>
                <input v-model="inputValue"/>
                <button v-on:click="handleAdditem">增加</button>
                <ul>
                <li v-for="(item, index) of list">{{item}}-{{index}}</li>
                </ul>
            </div>
            `
        }).mount('#root')
    </script>
</body>
</html>

附加：基础部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5  </title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // createApp 表示创建一个Vue应用，存储到app变量中
        // 传入的参数表示，这个应用最外层的组件，应该如何展示
        // mvvm 设计模式，m=>model 数据、v=>view 试图、vm=> viewModel 视图数据连接层
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world'
                }
            },
            template: "<div>{{message}}</div>"
        });
        app.mount('#root')
        // vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root')
    </script> 
</body>
</html>

weiweicn!

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[Vue] 3.数据的循环展示 + todoList功能

一、数据的循环展示定义data中的数据data() { return { list: ['hello', 'world', 'adam', 'xin'] } },循环数据：v-fortemplate: ` <ul> <li v-for="(item, index) of list">{
复制链接

扫一扫