最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • vue.js怎么做删除

    本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

    vue.js做删除的方法:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>图书馆增加书</title>
      <script src="js/vue.js"></script>
      <style>
        ul{
          list-style: none;
          width:100px;
          height:auto;
        }
        
        .buttonstylelist{
          width:80px;
          height:30px;
          border:1px solid blue;
          color:#fff;
          background: blue;
        }
      </style>
    </head>
    <body>
    <div id="app">
      <ul>
          <li v-for = "todo in todos" v-bind:style="stylelist">
              <span>{{todo.text}}</span>
          </li>
      </ul>
      <input type="text" v-on:keyup.enter="addTodo" v-model="message"/>
      <button v-on:click = "add" v-bind:class="buttonStyle">增加书籍</button>
      <button v-on:click="remove" v-bind:class="buttonStyle">删除</button>
    </div>
     <script>
     var app = new Vue({
      el:'#app',
      data:{
        todos:[{text:'红楼梦'},{text:'水浒传'}],
        message:'',
        stylelist:{
          height:'30px',
          lineHeight:'30px',
          border:'1px solid red',
          textAlign:'center',
          background:'pink',
          color:'red'
        },
        buttonStyle:{
          'buttonstylelist':true
        }
      },
      methods:{
        remove:function(index){
          this.todos.splice(index,1)
        },
        addTodo:function(){
          var text = this.message.trim();
          if(text){
            this.todos.push({text:text});
            this.message=" ";
          }
        },
        add:function(){
          var text = this.message.trim();
          if(text){
            this.todos.push({text:text});
            this.message=" ";
          }
        }
      }
     })
     </script>
    </body>
    </html>

    以上就是vue.js怎么做删除的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » vue.js怎么做删除
    • 257会员总数(位)
    • 5903资源总数(个)
    • 14本周发布(个)
    • 6 今日发布(个)
    • 540稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情