vue-input按钮实现文字增删_vue el-input点击的按钮清除内容-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42413689/article/details/81709564

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="text" v-model="text">
    <button @click="add">add</button>
    <button @click="clear">remove</button>
    <button @click="clean">remove one</button>
    <div v-for="x in arr" class="box">{{x}}</div>
</div>
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

</body>
<script src="vue.js"></script>
<script>
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    });
    const app=new Vue({
        el:"#app",
        data:{
            arr:[],
            text:""
        },
        methods:{
            add(){
                this.arr.push(this.text);
            },
            clear(){
                this.arr=[]
            },
            clean(){
                this.arr.pop();
            }
        }
    })


</script>
</html>