vue2.5入门 _技术笔记

小橘多多 2024-06-28

todolist功能开发
input框输入的内容点击提交后，内容会显示在ul的li标签中
首先对input框内容进行处理 v-model="inputValue"
在vue实例里定义一个数据data 对象inputValue:' ' 双向绑定
data定义一个空数组list[]
li标签用v-for循环 li标签的内容用插值表达式
在button上绑定点击事件
定义handleclick函数
this.list.push(this.inputValue)往数组里面添加数据（数据是input框的内容）
输入内容后希望input框回到清空状态
this.inputValue= ' ' input框的值为空

0赞 · 0采集
熊手拉猫手 2024-06-04

实现功能：在 input 框里输入信息，放进下方的列表项
原理：每次输入的信息放进 data 数组，利用数据双向绑定
在 <li v-for="item">{{item}}</li> 里进行渲染

0赞 · 0采集
慕尼黑3503962 2023-06-14

rbr ju$ts

0赞 · 0采集
ApinkChoLong 2023-05-26

<div id="root">
<div>
<input v-model="inputValue" />
<button @click="addValue">提交</button>
<button @click="deleteValue">删除</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods: {
addValue: function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
deleteValue: function() {
this.list.pop()
}
}
})
</script>

0赞 · 0采集
AppMan 2023-03-06

v-model 双向绑定data里面的inputValue的值
v-for 绑定data 里面的list值
定义提交方法
this.list.push(this.inputValue) 提交输入的值到list
this.inputValue = '' 情况输入的值

0赞 · 1采集
披星戴月的想你 2022-12-02

<body>
<div id="root">

<div>
   <input v-model="inputValue"/>
   <button @click="inputSubmit">提交</button>
   <li v-for="(item,index) of list" :key="index">{{item}}</li>
   <li>今天要做的事{{count}}</li>
</div>
</div>

<script>

new Vue({

    el: "#root",
    data: {
       inputValue:'',
       list: [],
       count:0
   },
   methods:{
      inputSubmit: function (){
         this.list.push(this.inputValue)
       this.inputValue = ''
      }
   },
   watch:{
      list: function(){
         this.count ++
       }
   }
})

</script>

</body>

0赞 · 0采集

沙澧情缘 2022-11-26

<div id="root"> 
    <input v-model="inputValue" />
    <button v-on:click="handleSubmit">提交</button>
    <ul>
        <li v-for="(item,index) of list" :key="index"> {{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            inputValue: ''hello",
            list: []
        },
        methods: {
            handleSubmit: function() {
                this.list.push(this.inputValue)
                this.inputValue = ""
            }
        }
    })
</script>

0赞 · 0采集

KwanLueng 2022-07-22

<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<li v-for="(item, index) of list" :key="index">

<li v-for="(item, index) of list" :key="index">

var vue = new Vue({
    el:"#root",
    data:{
        inputValue:'hello',
        list:[]
    },
    methods:{
        handleSubmit:function(){
            this.list.push(this.inputValue)
            this.inputValue = ''
        }
    }
})

0赞 · 0采集
Heracles 2022-06-05

<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item, index) of list" :key="index">
{{item}}
</li>
</ul>
</div>

<script>
new Vue({
el: "#root",
data: {
inputValue: "hello",
list: []
},
methods: {
handleSubmit: function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>

0赞 · 0采集
沙澧情缘 2021-11-06

todoList
<li v-for="(item,index) of list" :key="index">

0赞 · 0采集
木林森丿 2021-08-27

运用数据绑定 v-model，事件 @click，循环指令 v-for，三个结合使用。

0赞 · 0采集
砂与海 2021-07-31

v-if
v-for

0赞 · 0采集
weixin_慕用6334942 2021-05-20

todolist

0赞 · 0采集
qq_慕仰1307754 2021-04-01

将inputvalue的值加到list中在通过v-for显示出来最后把inputvalue清空，准备下一次输入

0赞 · 1采集

二条_ 2021-03-23

<div id="root">
    <div>
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
        <li v-for="(item,index) of list" :key="index">
        {{item}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            inputValue:'',
            list:[]
        },
        methods:{
            handleSubmit:function(){
                this.list.push(this.inputValue)
                this.inputValue=''
            }
        }
    })
</script>

0赞 · 0采集

weibo_心所遇_0 2020-11-29

this.list.push=

截图
0赞 · 0采集
慕圣4397568 2020-09-22

methods;{}//内写函数，例如函数名:function（）{}
v-model数据绑定

0赞 · 0采集
慕丝7437234 2020-06-22

TODOLIST
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
</div>
实例：
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})

0赞 · 0采集
Felix_Sun 2020-04-18

如果list中的数据有重复的就要用index来获取key 然后拿item,不然会报错

1赞 · 0采集
定海神针说长就长 2020-03-23

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

0赞 · 0采集
笑看人间百态3440791 2020-02-12

todolist 简单功能实现

截图
0赞 · 1采集

zhijianwubu 2020-02-08

3-1 todo-list功能开发

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Todo</title>    <script src="vue.js"></script></head><body>    <div id="demo">        <input v-model="inputValue" type="text" name="" id="">        <button @click="handleSubmit" >提交</button>        <ul>            <li v-for="(item,index) of list" :key="index"> {{item}} </li>        </ul>    </div>    <script>        new new Vue({            el:"#demo",            data: {                inputValue: "hello",                list: []            },            methods: {                handleSubmit: function(){                    this.list.push(this.inputValue);                    this.inputValue=""                }            }        })    </script></body></html>

0赞 · 1采集

壹贰叁肆伍 2019-12-07

<div id="root">
<div id="">
<input type="" v-model='input' />
<button type="button" @click="handclick">提交</button></div>
<ul>
<li v-for="(item ,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
input: '',
list: []
},
methods: {
handclick: function() {
if (this.input == "") {
alert("内容不能为空")
} else {
this.list.push(this.input),
this.input = ""
}
}
}
})
</script>

1赞 · 0采集
happy8888 2019-11-29

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>hello</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
            <p v-show="show">hello lily!</p>
            <button @click="handleClick">toggle</button>
            <ul>
                <li v-for="(item,index) in list" :key="index">{{item}}</li>
            </ul>
        </div>

        <script>
            new Vue({
                el:"#root",
                data:{
                    show:true,
                    list:[1,2,3]
                },
                methods:{
                    handleClick: function(){
                        this.show=!this.show;
                    }
                }
            })
        </script>
    </body>
</html>

0赞 · 0采集
慕婉清7434197 2019-11-13

new Vue({
el:"#root",
data:{
inputValue:"hello",
list:[1,2,3,4]
},
methods:{
submitClick:function(){
this.list.push(this.inputValue);
this.inputValue=""
}
}
})

0赞 · 0采集
weibo_莫宁愿_0 2019-09-26

通过this调用vue实例的data属性
list.push往列表里添加值
如下this.inputValue=''让提交后input框清空

0赞 · 0采集
Super绿巨人 2019-09-19

因为有数据的改变要在methods里面定义，这里的push相当于对data里的list数组添加数据，添加的数据来源于input的value值=data里面的inputValue值。

截图
0赞 · 0采集
泥泞css 2019-09-03

像数组里添加push()

0赞 · 0采集
精慕门6104788 2019-09-02

<!DOCTYPE html>
<html>
<head>
<title>todoList</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
  <input v-model="inputValue"></input>
  <button @click="handleClick">提交</button>
  <ul>
   <li v-for="item of list">{{item}}</li>
  </ul>
</div>
<script type="text/javascript">
  new Vue({
   el:"#root",
   data:{
    inputValue:"",
    list:[]
   },
   methods:{
    handleClick:function () {
     this.list.push(this.inputValue);
     this.inputValue = "";
    }
   }
  })
</script>
</body>
</html>

0赞 · 0采集
weixin_慕九州8207573 2019-07-20

<div id="root">
<div>

0赞 · 0采集

数据加载中...