vue快速入门的三个小实例
12691282
7年前
<h2>1.前言</h2> <p>用vue做项目也有一段时间了，之前也是写过关于vue和webpack构建项目的相关文章，大家有兴趣可以去看下 <a href="/misc/goto?guid=4959751644156714885" rel="nofollow,noindex">webpack+vue项目实战（一,搭建运行环境和相关配置）</a> （这个系列一共有5篇文章，这是第一篇，其它几篇文章链接就不贴了）。但是关于vue入门基础的文章，我还没有写过，那么今天就写vue入门的三个小实例，这三个小实例是我刚接触vue的时候的练手作品，难度从很简单到简单，都是入门级的。希望能帮到大家更好的学习和了解vue，也是让自己能够复习一下vue。如果发现文章写得有什么不好，写错了，或者有什么建议！欢迎大家指点迷津！</p> <p>1.本篇文章使用的vue版本是 2.4.2 ，大家要注意版本问题</p> <p>2.现在我也是假设您有基础的html,css,javascript的知识，也已经看过了 <a href="/misc/goto?guid=4959751644251712428" rel="nofollow,noindex">官网</a> 的基本介绍，对vue有了一个大概的认识了，了解了常用的vue指令(v-model,v-show,v-if,v-for,v-on,v-bind等)！如果刚接触前端的话，你看着文章可能会蒙圈，建议先学习基础，掌握了基础知识再来看！</p> <p>3.下面的实例，建议大家边看文章边动手做！这样思路会非常清晰，不易混乱！也不会觉得文章长！如果只看文章，你可能未必会看完，因为文章我讲得比较细，比较长！</p> <h2>2.什么是vue</h2> <p>vue是现在很火的一个前端MVVM框架，它以数据驱动和组件化的思想构建，与angular和react并称前端三大框架。相比angular和react，vue更加轻巧、高性能、也很容易上手。大家也可以移步，看一下vue的介绍和核心功能 <a href="/misc/goto?guid=4959751644342736815" rel="nofollow,noindex">官网介绍</a> 。简单粗暴的理解就是：用vue开发的时候，就是操作数据，然后vue就会处理，以数据驱动去改变DOM（不知道有没有理解错，理解错了指点下）。</p> <p>下面就是一个最简单的说明例子</p> <p>代码如下</p> <p>html</p> <pre> <code class="language-html"><div id="app"> <p>{{ message }}</p> <input v-model="message"> </div></code></pre> <p>js</p> <pre> <code class="language-html">new Vue({ el: '#app', data: { message: 'Hello Vue!' } })</code></pre> <p>栗子</p> <p>相信也不难理解，就是 input 绑定了 message 这个值，然后在 input 修改的时候， message 就改了，由于双向绑定，同时页面的html（ {{ message }} ）进行了修改！</p> <p>好，下面进入例子学习！</p> <h2>3.选项卡</h2> <h3>运行效果</h3> <p><img src="https://simg.open-open.com/show/caace91db65eea894c859287514b7e98.gif"></p> <h3>原理分析和实现</h3> <p>这个很简单，无非就是一个点击切换显示而已。但是大家也要实现。如果这个看明白了，再看下面两个！这个实例应该只是一个热身和熟悉的作用！</p> <p>这个的步骤只有一步，原理也没什么。我直接在代码打注释，看了注释，大家就明白了！</p> <h3>完整代码</h3> <p><!DOCTYPE html></p> <p><html lang="en"></p> <p><head></p> <pre> <code class="language-html"><meta charset="UTF-8"> <title>Title</title></code></pre> <p></head></p> <p><style></p> <pre> <code class="language-html">body{ font-family:"Microsoft YaHei"; } #tab{ width: 600px; margin: 0 auto; } .tab-tit{ font-size: 0; width: 600px; } .tab-tit a{ display: inline-block; height: 40px; line-height: 40px; font-size: 16px; width: 25%; text-align: center; background: #ccc; color: #333; text-decoration: none; } .tab-tit .cur{ background: #09f; color: #fff; } .tab-con div{ border: 1px solid #ccc; height: 400px; padding-top: 20px; }</code></pre> <p></style></p> <p><body></p> <p><div id="tab"></p> <pre> <code class="language-html"><div class="tab-tit"> <!--点击设置curId的值 如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式--> <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a> <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a> <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a> <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a> </div> <div class="tab-con"> <!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推--> <div v-show="curId===0"> html<br/> </div> <div v-show="curId===1"> css </div> <div v-show="curId===2"> javascript </div> <div v-show="curId===3"> vue </div> </div></code></pre> <p></div></p> <p></body></p> <p><script src="vue.min.js"></script></p> <p><script></p> <pre> <code class="language-html">new Vue({ el: '#tab', data: { curId: 0 }, computed: {}, methods: {}, mounted: function () { } })</code></pre> <p></script></p> <p></html></p> <h2>4.统计总价</h2> <h3>运行效果</h3> <p><img src="https://simg.open-open.com/show/d4d8c06ba353ea6b86171ad5602bd6f6.gif"></p> <h3>原理分析和实现</h3> <p>首先，还是先把布局写好，和引入vue，准备vue实例，这个不多说，代码如下</p> <pre> <code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .fl{ float: left; } .fr{ float: right; } blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, img, input, li, ol, p, table, td, textarea, th, ul { margin: 0; padding: 0; } .clearfix{ zoom: 1; } .clearfix:after { clear: both; } .clearfix:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } a{ text-decoration: none; color: #333; } img{vertical-align: middle;} .page-shopping-cart { width: 1200px; margin: 50px auto; font-size: 14px; border: 1px solid #e3e3e3; border-top: 2px solid #317ee7; } .page-shopping-cart .cart-title { color: #317ee7; font-size: 16px; text-align: left; padding-left: 20px; line-height: 68px; } .page-shopping-cart .red-text { color: #e94826; } .page-shopping-cart .check-span { display: block; width: 24px; height: 20px; background: url("shopping_cart.png") no-repeat 0 0; } .page-shopping-cart .check-span.check-true { background: url("shopping_cart.png") no-repeat 0 -22px; } .page-shopping-cart .td-check { width: 70px; } .page-shopping-cart .td-product { width: 460px; } .page-shopping-cart .td-num, .page-shopping-cart .td-price, .page-shopping-cart .td-total { width: 160px; } .page-shopping-cart .td-do { width: 150px; } .page-shopping-cart .cart-product-title { text-align: center; height: 38px; line-height: 38px; padding: 0 20px; background: #f7f7f7; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; } .page-shopping-cart .cart-product-title .td-product { text-align: center; font-size: 14px; } .page-shopping-cart .cart-product-title .td-check { text-align: left; } .page-shopping-cart .cart-product-title .td-check .check-span { margin: 9px 6px 0 0; } .page-shopping-cart .cart-product { padding: 0 20px; text-align: center; } .page-shopping-cart .cart-product table { width: 100%; text-align: center; font-size: 14px; } .page-shopping-cart .cart-product table td { padding: 20px 0; } .page-shopping-cart .cart-product table tr { border-bottom: 1px dashed #e3e3e3; } .page-shopping-cart .cart-product table tr:last-child { border-bottom: none; } .page-shopping-cart .cart-product table .product-num { border: 1px solid #e3e3e3; display: inline-block; text-align: center; } .page-shopping-cart .cart-product table .product-num .num-do { width: 24px; height: 28px; display: block; background: #f7f7f7; } .page-shopping-cart .cart-product table .product-num .num-reduce span { background: url("shopping_cart.png") no-repeat -40px -22px; display: block; width: 6px; height: 2px; margin: 13px auto 0 auto; } .page-shopping-cart .cart-product table .product-num .num-add span { background: url("shopping_cart.png") no-repeat -60px -22px; display: block; width: 8px; height: 8px; margin: 10px auto 0 auto; } .page-shopping-cart .cart-product table .product-num .num-input { width: 42px; height: 28px; line-height: 28px; border: none; text-align: center; } .page-shopping-cart .cart-product table .td-product { text-align: left; font-size: 12px; line-height: 20px; } .page-shopping-cart .cart-product table .td-product img { border: 1px solid #e3e3e3; margin-right: 10px; } .page-shopping-cart .cart-product table .td-product .product-info { display: inline-block; vertical-align: middle; } .page-shopping-cart .cart-product table .td-do { font-size: 12px; } .page-shopping-cart .cart-product-info { height: 50px; line-height: 50px; background: #f7f7f7; padding-left: 20px; } .page-shopping-cart .cart-product-info .delect-product { color: #666; } .page-shopping-cart .cart-product-info .delect-product span { display: inline-block; vertical-align: top; margin: 18px 8px 0 0; width: 13px; height: 15px; background: url("shopping_cart.png") no-repeat -60px 0; } .page-shopping-cart .cart-product-info .product-total { font-size: 14px; color: #e94826; } .page-shopping-cart .cart-product-info .product-total span { font-size: 20px; } .page-shopping-cart .cart-product-info .check-num { color: #333; } .page-shopping-cart .cart-product-info .check-num span { color: #e94826; } .page-shopping-cart .cart-product-info .keep-shopping { color: #666; margin-left: 40px; } .page-shopping-cart .cart-product-info .keep-shopping span { display: inline-block; vertical-align: top; margin: 18px 8px 0 0; width: 15px; height: 15px; background: url("shopping_cart.png") no-repeat -40px 0; } .page-shopping-cart .cart-product-info .btn-buy { height: 50px; color: #fff; font-size: 20px; display: block; width: 110px; background: #ff7700; text-align: center; margin-left: 30px; } .page-shopping-cart .cart-worder { padding: 20px; } .page-shopping-cart .cart-worder .choose-worder { color: #fff; display: block; background: #39e; width: 140px; height: 40px; line-height: 40px; border-radius: 4px; text-align: center; margin-right: 20px; } .page-shopping-cart .cart-worder .choose-worder span { display: inline-block; vertical-align: top; margin: 9px 10px 0 0; width: 22px; height: 22px; background: url("shopping_cart.png") no-repeat -92px 0; } .page-shopping-cart .cart-worder .worker-info { color: #666; } .page-shopping-cart .cart-worder .worker-info img { border-radius: 100%; margin-right: 10px; } .page-shopping-cart .cart-worder .worker-info span { color: #000; } .choose-worker-box { width: 620px; background: #fff; } .choose-worker-box .box-title { height: 40px; line-height: 40px; background: #F7F7F7; text-align: center; position: relative; font-size: 14px; } .choose-worker-box .box-title a { display: block; position: absolute; top: 15px; right: 16px; width: 10px; height: 10px; background: url("shopping_cart.png") no-repeat -80px 0; } .choose-worker-box .box-title a:hover { background: url("shopping_cart.png") no-repeat -80px -22px; } .choose-worker-box .worker-list { padding-top: 30px; height: 134px; overflow-y: auto; } .choose-worker-box .worker-list li { float: left; width: 25%; text-align: center; margin-bottom: 30px; } .choose-worker-box .worker-list li p { margin-top: 8px; } .choose-worker-box .worker-list li.cur a { color: #f70; } .choose-worker-box .worker-list li.cur a img { border: 1px solid #f70; } .choose-worker-box .worker-list li a:hover { color: #f70; } .choose-worker-box .worker-list li a:hover img { border: 1px solid #f70; } .choose-worker-box .worker-list li img { border: 1px solid #fff; border-radius: 100%; } </style> </head> <body> <div class="page-shopping-cart" id="shopping-cart"> <h4 class="cart-title">购物清单</h4> <div class="cart-product-title clearfix"> <div class="td-check fl"><span class="check-span fl check-all"></span>全选</div> <div class="td-product fl">商品</div> <div class="td-num fl">数量</div> <div class="td-price fl">单价(元)</div> <div class="td-total fl">金额(元)</div> <div class="td-do fl">操作</div> </div> <div class="cart-product clearfix"> <table> <tbody><tr> <td class="td-check"><span class="check-span"></span></td> <td class="td-product"><img src="testimg.jpg" width="98" height="98"> <div class="product-info"> <h6>【斯文】甘油 | 丙三醇</h6> <p>品牌：韩国skc 产地：韩国</p> <p>规格/纯度:99.7% 起定量：215千克</p> <p>配送仓储：上海仓海仓储</p> </div> <div class="clearfix"></div> </td> <td class="td-num"> <div class="product-num"> <a href="javascript:;" class="num-reduce num-do fl"><span></span></a> <input type="text" class="num-input" value="3"> <a href="javascript:;" class="num-add num-do fr"><span></span></a> </div> </td> <td class="td-price"> <p class="red-text">￥<span class="price-text">800</span>.00</p> </td> <td class="td-total"> <p class="red-text">￥<span class="total-text">800</span>.00</p> </td> <td class="td-do"><a href="javascript:;" class="product-delect">删除</a></td> </tr> <tr> <td class="td-check"><span class="check-span check-true"></span></td> <td class="td-product"><img src="testimg.jpg" width="98" height="98"> <div class="product-info"> <h6>【斯文】甘油 | 丙三醇</h6> <p>品牌：韩国skc 产地：韩国</p> <p>规格/纯度:99.7% 起定量：215千克</p> <p>配送仓储：上海仓海仓储</p> </div> <div class="clearfix"></div> </td> <td class="td-num"> <div class="product-num"> <a href="javascript:;" class="num-reduce num-do fl"><span></span></a> <input type="text" class="num-input" value="1"> <a href="javascript:;" class="num-add num-do fr"><span></span></a> </div> </td> <td class="td-price"> <p class="red-text">￥<span class="price-text">800</span>.00</p> </td> <td class="td-total"> <p class="red-text">￥<span class="total-text">800</span>.00</p> </td> <td class="td-do"><a href="javascript:;" class="product-delect">删除</a></td> </tr> </tbody></table> </div> <div class="cart-product-info"> <a class="delect-product" href="javascript:;"><span></span>删除所选商品</a> <a class="keep-shopping" href="#"><span></span>继续购物</a> <a class="btn-buy fr" href="javascript:;">去结算</a> <p class="fr product-total">￥<span>1600</span></p> <p class="fr check-num"><span>2</span>件商品总计（不含运费）：</p> </div> <div class="cart-worder clearfix"> <a href="javascript:;" class="choose-worder fl"><span></span>绑定跟单员</a> <div class="worker-info fl"> </div> </div> </div> </body> <script src="vue.min.js"></script> <script> new Vue({ el:'#shopping-cart', data:{ }, computed: {}, methods:{ } }) </script> </html></code></pre> <p>然后准备下列表数据，根据下面表格的箭头</p> <p><img src="https://simg.open-open.com/show/72408e17d1684b84ac05bba5c99b1841.png"></p> <p>所以大家就知道吗，下面的数据大概是涨这样</p> <pre> <code class="language-html">productList:[ { 'pro_name': '【斯文】甘油 | 丙三醇',//产品名称 'pro_brand': 'skc',//品牌名称 'pro_place': '韩国',//产地 'pro_purity': '99.7%',//规格 'pro_min': "215千克",//最小起订量 'pro_depot': '上海仓海仓储',//所在仓库 'pro_num': 3,//数量 'pro_img': '../../images/ucenter/testimg.jpg',//图片链接 'pro_price': 800//单价 } ]</code></pre> <p>准备了这么多，大家可能想到，还缺少一个，就是记录产品是否有选中，但是这个字段，虽然可以在上面那里加，但是意义不大，比如在平常项目那里！后台的数据不会这样返回，数据库也不会有这个字段，这个字段应该是自己添加的。代码如下</p> <pre> <code class="language-html">new Vue({ el:'#shopping-cart', data:{ productList:[ { 'pro_name': '【斯文】甘油 | 丙三醇',//产品名称 'pro_brand': 'skc',//品牌名称 'pro_place': '韩国',//产地 'pro_purity': '99.7%',//规格 'pro_min': "215千克",//最小起订量 'pro_depot': '上海仓海仓储',//所在仓库 'pro_num': 3,//数量 'pro_img': '../../images/ucenter/testimg.jpg',//图片链接 'pro_price': 800//单价 } ] }, computed: {}, methods:{ }, mounted:function () { //为productList添加select（是否选中）字段，初始值为true this.productList.map(function(item){item.select=true;console.log(item)}) } })</code></pre> <h3>步骤1</h3> <p>为了着重表示我修改了什么地方，代码我现在只贴出修改的部分，大家对着上面的布局，就很容易知道我改的是什么地方了！下面也是这样操作！</p> <p>点击增加和减少按钮（箭头指向地方），所属列的金额改变（红框地方）</p> <p><img src="https://simg.open-open.com/show/ba9c475db9b72a89dcd05b9aef1dfeed.png"></p> <p>执行步骤1之前，要先把列表的数据给铺出来。利用v-for指令。代码如下</p> <pre> <code class="language-html"><tr v-for="item in productList"> <td class="td-check"><span class="check-span"></span></td> <td class="td-product"><img :src="item.pro_img" width="98" height="98"> <div class="product-info"> <h6>{{item.pro_name}}</h6> <p>品牌：{{item.pro_brand}} 产地：{{item.pro_place}}</p> <p>规格/纯度:{{item.pro_purity}} 起定量：{{item.pro_min}}</p> <p>配送仓储：{{item.pro_depot}}</p> </div> <div class="clearfix"></div> </td> <td class="td-num"> <div class="product-num"> <a href="javascript:;" class="num-reduce num-do fl" @click="item.pro_num--"><span></span></a> <input type="text" class="num-input" v-model="item.pro_num"> <a href="javascript:;" class="num-add num-do fr" @click="item.pro_num++"><span></span></a> </div> </td> <td class="td-price"> <p class="red-text">￥<span class="price-text">{{item.pro_price.toFixed(2)}}</span></p> </td> <td class="td-total"> <p class="red-text">￥<span class="total-text">{{item.pro_price*item.pro_num}}</span>.00</p> </td> <td class="td-do"><a href="javascript:;" class="product-delect">删除</a></td> </tr></code></pre> <p>这样，列表的数据就有了！</p> <p><img src="https://simg.open-open.com/show/a51d03efa3f062c2a59081355bf25f2b.gif"></p> <p>也可以发现， <img src="https://simg.open-open.com/show/1179d9ca53a8fdca1d2d1a586200dfef.png"> 这两个按钮的功能已经实现了，后面的金额也会发生变化！是不是感到很惊喜！其实这里没什么特别的，就是因为输入框利用v-model绑定了数量（ pro_num ），然后两个按钮分别添加了事件 @click="item.pro_num--" 和@ click="item.pro_num++" 。比如刚开始pro_num是3，点击 <img src="https://simg.open-open.com/show/962cb9858b1200e6b39b18262e4b72da.png"> ， pro_num 就变成2，点击 <img src="https://simg.open-open.com/show/92de8e2e97d30cc6537e1a33c9587578.png"></p> <p>， pro_num 就变成4，然后后面的金额会改改，是因为 {{item.pro_price*item.pro_num}} 。只要pro_price或者pro_num的值改变了，整一块也会改变，视图就会刷新，我们就能看到变化（这些事情是vue做的，这就是MVVM的魅力，数据驱动视图改变）。</p> <h3>步骤2</h3> <p>点击所属列选择按钮（箭头指向地方），总计的金额（红框地方）和已选产品的列数（蓝框地方）和全选（黄框地方）会改变（如果已经全选了，全选按钮自动变成全选，如果没有全选，全选按钮，自动取消全选）！</p> <p><img src="https://simg.open-open.com/show/f955e1786363b755a352bde975cd00ec.png"></p> <p>首先，选择与取消选择，在这里只有两个操作（其实只有一个：改变这条记录的 select 字段）。</p> <p><img src="https://simg.open-open.com/show/96bb80df3b1ea0effac1bf2138751ea0.png"></p> <p>然后改变 <img src="https://simg.open-open.com/show/442c0457cd8632af868ca1ca8bd83a35.png"> ，如果这条记录 select 为 false ，就显示 <img src="https://simg.open-open.com/show/345bc3eabf493ed1d6aa60bfaf8dec34.png" alt="vue快速入门的三个小实例" width="32" height="32"> ，否则就显示 <img src="https://simg.open-open.com/show/7e2ec1ca54429007174d77c86494a81b.png"> 。</p> <p>代码如下</p> <pre> <code class="language-html"><td class="td-check"><span class="check-span" @click="item.select=!item.select" :class="{'check-true':item.select}"></span></td></code></pre> <p>其实就是等于添加了 @click="item.select=!item.select" :class="{'check-true':item.select}" 这里。点击这个，这条数据的 select 字段就取反（true->false或者false->true）。然后 :class="{'check-true':item.select}" ，就会根据这条数据的 select 字段进行判断，是否添加 check-true 类名，如果 select 字段为true，就添加类名，显示 <img src="https://simg.open-open.com/show/d46377bd733da5e8c2236d64af25e68a.png"> 。否则不添加类名，显示</p> <p><img src="https://simg.open-open.com/show/055adf62efc294fd5cc55d8bca11e172.png"></p> <p>。</p> <p>然后， <img src="https://simg.open-open.com/show/72086fbfdcb03b8b0e78ef9d50bed2c9.png"> 全选按钮，是否变成 <img src="https://simg.open-open.com/show/d46377bd733da5e8c2236d64af25e68a.png" alt="vue快速入门的三个小实例" width="34" height="30"> 。这里用一个computed（计算属性）就好。代码如下</p> <p>html</p> <pre> <code class="language-html"><div class="td-check fl"><span class="check-span fl check-all" :class="{'check-true':isSelectAll}"></span>全选</div></code></pre> <p>js</p> <pre> <code class="language-html">computed: { isSelectAll:function(){ //如果productList中每一条数据的select都为true，返回true，否则返回false; return this.productList.every(function (val) { return val.select}); } }</code></pre> <p>代码我解释下，就是计算属性中，定义的isSelectAll依赖productList。只要productList改变，isSelectAll的返回值就会改变，然后 :class="{'check-true':isSelectAll}" 根绝isSelectAll返回值是否添加 'check-true' 类名，显示对应的样式！</p> <p>最后， <img src="https://simg.open-open.com/show/c38e4b764ddb46fe99418ac879934ce3.png"> ，这里的多少件产品和总价，也是使用计算属性，有了上一步的基础，给出代码，大家一看就明白了！</p> <p>html</p> <pre> <code class="language-html"><p class="fr product-total">￥<span>{{getTotal.totalPrice}}</span></p> <p class="fr check-num"><span>{{getTotal.totalNum}}</span>件商品总计（不含运费）：</p></code></pre> <p>js</p> <pre> <code class="language-html">computed: { //检测是否全选 isSelectAll:function(){ //如果productList中每一条数据的select都为true，返回true，否则返回false; return this.productList.every(function (val) { return val.select}); }, //获取总价和产品总件数 getTotal:function(){ //获取productList中select为true的数据。 var _proList=this.productList.filter(function (val) { return val.select}),totalPrice=0; for(var i=0,len=_proList.length;i<len;i++){ //总价累加 totalPrice+=_proList[i].pro_num*_proList[i].pro_price; } //选择产品的件数就是_proList.length，总价就是totalPrice return {totalNum:_proList.length,totalPrice:totalPrice} } },</code></pre> <p>代码很简单，html根据getTotal返回值显示数据，getTotal依赖productList的数据，只要productList改变，返回值会改变，视图也会改变！</p> <p><img src="https://simg.open-open.com/show/c3d7e2e7ca6f7e5b26c66d2ea1d64cd3.gif"></p> <h3>步骤3</h3> <p>点击全选按钮（箭头指向部分），会自动的对产品进行全选或者取消全选，下面的总计也会发生改变</p> <p><img src="https://simg.open-open.com/show/93c421bc8c454beecf00b8593826fb32.png"></p> <p>做到这一步，大家应该知道，全选或者取消全选，就是改变记录的 select 。但是怎么知道现在的列表有没有全选呢？这个很贱，不需要在操作函数（全选与取消全选函数）里面遍历，大家应该还记得第二步的计算属性 isSelectAll （为true就是全选，否则不是全选），把这个传进操作函数就好，然后操作函数，根据参数，决定执行全选，还是取消全选操作。代码如下！</p> <p>html</p> <pre> <code class="language-html"><div class="td-check fl"><span class="check-span fl check-all" :class="{'check-true':isSelectAll}" @click="selectProduct(isSelectAll)"></span>全选</div></code></pre> <p>js</p> <pre> <code class="language-html">methods: { //全选与取消全选 selectProduct:function(_isSelect){ //遍历productList，全部取反 for (var i = 0, len = this.productList.length; i < len; i++) { this.productList[i].select = !_isSelect; } } },</code></pre> <p><img src="https://simg.open-open.com/show/637b569b0fb31b51aedb4e458b155158.gif"></p> <h3>步骤4</h3> <p>点击删除产品，会删除已经选中的，全选按钮和下面的总计，都会变化！点击每条记录后面的删除，会删除当前的这条记录。全选按钮和下面的总计，也都会变化！</p> <p><img src="https://simg.open-open.com/show/ed15dd5f0fd6d736258b6de5b2e51792.png"></p> <p>首先，点击删除产品，删除已经选中。这个大家知道了怎么做了！就是遍历productList，如果哪条记录的select为true，就删除。</p> <p>然后，点击每条记录后面的删除，删除当前的这条记录。这个在html遍历productList的时候。顺便带上索引，然后把索引当成参数，传进操作函数，然后根据索引参数，删除productList的哪一条记录。即可实现！代码如下！</p> <p>html</p> <pre> <code class="language-html"><!--遍历的时候带上索引--> <tr v-for="(item,index) in productList"> <td class="td-check"><span class="check-span" @click="item.select=!item.select" :class="{'check-true':item.select}"></span></td> <td class="td-product"><img :src="item.pro_img" width="98" height="98"> <div class="product-info"> <h6>{{item.pro_name}}</h6> <p>品牌：{{item.pro_brand}} 产地：{{item.pro_place}}</p> <p>规格/纯度:{{item.pro_purity}} 起定量：{{item.pro_min}}</p> <p>配送仓储：{{item.pro_depot}}</p> </div> <div class="clearfix"></div> </td> <td class="td-num"> <div class="product-num"> <a href="javascript:;" class="num-reduce num-do fl" @click="item.pro_num--"><span></span></a> <input type="text" class="num-input" v-model="item.pro_num"> <a href="javascript:;" class="num-add num-do fr" @click="item.pro_num++"><span></span></a> </div> </td> <td class="td-price"> <p class="red-text">￥<span class="price-text">{{item.pro_price.toFixed(2)}}</span></p> </td> <td class="td-total"> <p class="red-text">￥<span class="total-text">{{item.pro_price*item.pro_num}}</span>.00</p> </td> <td class="td-do"><a href="javascript:;" class="product-delect" @click="deleteOneProduct(index)">删除</a></td> </tr> ... <a class="delect-product" href="javascript:;" @click="deleteProduct"><span></span>删除所选商品</a></code></pre> <p>js</p> <pre> <code class="language-html">//删除已经选中(select=true)的产品 deleteProduct:function () { this.productList=this.productList.filter(function (item) {return !item.select}) }, //删除单条产品 deleteOneProduct:function (index) { //根据索引删除productList的记录 this.productList.splice(index,1); },</code></pre> <h3>完整代码</h3> <p>样式图片</p> <p><img src="https://simg.open-open.com/show/117d45a8157e49b31947f1e5b255a58e.png"></p> <pre> <code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .fl { float: left; } .fr { float: right; } blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, img, input, li, ol, p, table, td, textarea, th, ul { margin: 0; padding: 0; } .clearfix { zoom: 1; } .clearfix:after { clear: both; } .clearfix:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } a { text-decoration: none; color: #333; } img { vertical-align: middle; } .page-shopping-cart { width: 1200px; margin: 50px auto; font-size: 14px; border: 1px solid #e3e3e3; border-top: 2px solid #317ee7; } .page-shopping-cart .cart-title { color: #317ee7; font-size: 16px; text-align: left; padding-left: 20px; line-height: 68px; } .page-shopping-cart .red-text { color: #e94826; } .page-shopping-cart .check-span { display: block; width: 24px; height: 20px; background: url("shopping_cart.png") no-repeat 0 0; } .page-shopping-cart .check-span.check-true { background: url("shopping_cart.png") no-repeat 0 -22px; } .page-shopping-cart .td-check { width: 70px; } .page-shopping-cart .td-product { width: 460px; } .page-shopping-cart .td-num, .page-shopping-cart .td-price, .page-shopping-cart .td-total { width: 160px; } .page-shopping-cart .td-do { width: 150px; } .page-shopping-cart .cart-product-title { text-align: center; height: 38px; line-height: 38px; padding: 0 20px; background: #f7f7f7; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; } .page-shopping-cart .cart-product-title .td-product { text-align: center; font-size: 14px; } .page-shopping-cart .cart-product-title .td-check { text-align: left; } .page-shopping-cart .cart-product-title .td-check .check-span { margin: 9px 6px 0 0; } .page-shopping-cart .cart-product { padding: 0 20px; text-align: center; } .page-shopping-cart .cart-product table { width: 100%; text-align: center; font-size: 14px; } .page-shopping-cart .cart-product table td { padding: 20px 0; } .page-shopping-cart .cart-product table tr { border-bottom: 1px dashed #e3e3e3; } .page-shopping-cart .cart-product table tr:last-child { border-bottom: none; } .page-shopping-cart .cart-product table .product-num { border: 1px solid #e3e3e3; display: inline-block; text-align: center; } .page-shopping-cart .cart-product table .product-num .num-do { width: 24px; height: 28px; display: block; background: #f7f7f7; } .page-shopping-cart .cart-product table .product-num .num-reduce span { background: url("shopping_cart.png") no-repeat -40px -22px; display: block; width: 6px; height: 2px; margin: 13px auto 0 auto; } .page-shopping-cart .cart-product table .product-num .num-add span { background: url("shopping_cart.png") no-repeat -60px -22px; display: block; width: 8px; height: 8px; margin: 10px auto 0 auto; } .page-shopping-cart .cart-product table .product-num .num-input { width: 42px; height: 28px; line-height: 28px; border: none; text-align: center; } .page-shopping-cart .cart-product table .td-product { text-align: left; font-size: 12px; line-height: 20px; } .page-shopping-cart .cart-product table .td-product img { border: 1px solid #e3e3e3; margin-right: 10px; } .page-shopping-cart .cart-product table .td-product .product-info { display: inline-block; vertical-align: middle; } .page-shopping-cart .cart-product table .td-do { font-size: 12px; } .page-shopping-cart .cart-product-info { height: 50px; line-height: 50px; background: #f7f7f7; padding-left: 20px; } .page-shopping-cart .cart-product-info .delect-product { color: #666; } .page-shopping-cart .cart-product-info .delect-product span { display: inline-block; vertical-align: top; margin: 18px 8px 0 0; width: 13px; height: 15px; background: url("shopping_cart.png") no-repeat -60px 0; } .page-shopping-cart .cart-product-info .product-total { font-size: 14px; color: #e94826; } .page-shopping-cart .cart-product-info .product-total span { font-size: 20px; } .page-shopping-cart .cart-product-info .check-num { color: #333; } .page-shopping-cart .cart-product-info .check-num span { color: #e94826; } .page-shopping-cart .cart-product-info .keep-shopping { color: #666; margin-left: 40px; } .page-shopping-cart .cart-product-info .keep-shopping span { display: inline-block; vertical-align: top; margin: 18px 8px 0 0; width: 15px; height: 15px; background: url("shopping_cart.png") no-repeat -40px 0; } .page-shopping-cart .cart-product-info .btn-buy { height: 50px; color: #fff; font-size: 20px; display: block; width: 110px; background: #ff7700; text-align: center; margin-left: 30px; } .page-shopping-cart .cart-worder { padding: 20px; } .page-shopping-cart .cart-worder .choose-worder { color: #fff; display: block; background: #39e; width: 140px; height: 40px; line-height: 40px; border-radius: 4px; text-align: center; margin-right: 20px; } .page-shopping-cart .cart-worder .choose-worder span { display: inline-block; vertical-align: top; margin: 9px 10px 0 0; width: 22px; height: 22px; background: url("shopping_cart.png") no-repeat -92px 0; } .page-shopping-cart .cart-worder .worker-info { color: #666; } .page-shopping-cart .cart-worder .worker-info img { border-radius: 100%; margin-right: 10px; } .page-shopping-cart .cart-worder .worker-info span { color: #000; } .choose-worker-box { width: 620px; background: #fff; } .choose-worker-box .box-title { height: 40px; line-height: 40px; background: #F7F7F7; text-align: center; position: relative; font-size: 14px; } .choose-worker-box .box-title a { display: block; position: absolute; top: 15px; right: 16px; width: 10px; height: 10px; background: url("shopping_cart.png") no-repeat -80px 0; } .choose-worker-box .box-title a:hover { background: url("shopping_cart.png") no-repeat -80px -22px; } .choose-worker-box .worker-list { padding-top: 30px; height: 134px; overflow-y: auto; } .choose-worker-box .worker-list li { float: left; width: 25%; text-align: center; margin-bottom: 30px; } .choose-worker-box .worker-list li p { margin-top: 8px; } .choose-worker-box .worker-list li.cur a { color: #f70; } .choose-worker-box .worker-list li.cur a img { border: 1px solid #f70; } .choose-worker-box .worker-list li a:hover { color: #f70; } .choose-worker-box .worker-list li a:hover img { border: 1px solid #f70; } .choose-worker-box .worker-list li img { border: 1px solid #fff; border-radius: 100%; } </style> </head> <body> <div class="page-shopping-cart" id="shopping-cart"> <h4 class="cart-title">购物清单</h4> <div class="cart-product-title clearfix"> <div class="td-check fl"><span class="check-span fl check-all" :class="{'check-true':isSelectAll}" @click="selectProduct(isSelectAll)"></span>全选</div> <div class="td-product fl">商品</div> <div class="td-num fl">数量</div> <div class="td-price fl">单价(元)</div> <div class="td-total fl">金额(元)</div> <div class="td-do fl">操作</div> </div> <div class="cart-product clearfix"> <table> <tbody> <!--遍历的时候带上索引--> <tr v-for="(item,index) in productList"> <td class="td-check"><span class="check-span" @click="item.select=!item.select" :class="{'check-true':item.select}"></span></td> <td class="td-product"><img :src="item.pro_img" width="98" height="98"> <div class="product-info"> <h6>{{item.pro_name}}</h6> <p>品牌：{{item.pro_brand}} 产地：{{item.pro_place}}</p> <p>规格/纯度:{{item.pro_purity}} 起定量：{{item.pro_min}}</p> <p>配送仓储：{{item.pro_depot}}</p> </div> <div class="clearfix"></div> </td> <td class="td-num"> <div class="product-num"> <a href="javascript:;" class="num-reduce num-do fl" @click="item.pro_num--"><span></span></a> <input type="text" class="num-input" v-model="item.pro_num"> <a href="javascript:;" class="num-add num-do fr" @click="item.pro_num++"><span></span></a> </div> </td> <td class="td-price"> <p class="red-text">￥<span class="price-text">{{item.pro_price.toFixed(2)}}</span></p> </td> <td class="td-total"> <p class="red-text">￥<span class="total-text">{{item.pro_price*item.pro_num}}</span>.00</p> </td> <td class="td-do"><a href="javascript:;" class="product-delect" @click="deleteOneProduct(index)">删除</a></td> </tr> </tbody> </table> </div> <div class="cart-product-info"> <a class="delect-product" href="javascript:;" @click="deleteProduct"><span></span>删除所选商品</a> <a class="keep-shopping" href="#"><span></span>继续购物</a> <a class="btn-buy fr" href="javascript:;">去结算</a> <p class="fr product-total">￥<span>{{getTotal.totalPrice}}</span></p> <p class="fr check-num"><span>{{getTotal.totalNum}}</span>件商品总计（不含运费）：</p> </div> </div> </body> <script src="vue.min.js"></script> <script> new Vue({ el: '#shopping-cart', data: { productList: [ { 'pro_name': '【斯文】甘油 | 丙三醇',//产品名称 'pro_brand': 'skc',//品牌名称 'pro_place': '韩国',//产地 'pro_purity': '99.7%',//规格 'pro_min': "215千克",//最小起订量 'pro_depot': '上海仓海仓储',//所在仓库 'pro_num': 3,//数量 'pro_img': '../../images/ucenter/testimg.jpg',//图片链接 'pro_price': 800//单价 }, { 'pro_name': '【斯文】甘油 | 丙三醇',//产品名称 'pro_brand': 'skc',//品牌名称 'pro_place': '韩国',//产地 'pro_purity': '99.7%',//规格 'pro_min': "215千克",//最小起订量 'pro_depot': '上海仓海仓储',//所在仓库 'pro_num': 3,//数量 'pro_img': '../../images/ucenter/testimg.jpg',//图片链接 'pro_price': 800//单价 }, { 'pro_name': '【斯文】甘油 | 丙三醇',//产品名称 'pro_brand': 'skc',//品牌名称 'pro_place': '韩国',//产地 'pro_purity': '99.7%',//规格 'pro_min': "215千克",//最小起订量 'pro_depot': '上海仓海仓储',//所在仓库 'pro_num': 3,//数量 'pro_img': '../../images/ucenter/testimg.jpg',//图片链接 'pro_price': 800//单价 } ] }, computed: { //检测是否全选 isSelectAll:function(){ //如果productList中每一条数据的select都为true，返回true，否则返回false; return this.productList.every(function (val) { return val.select}); }, //获取总价和产品总件数 getTotal:function(){ //获取productList中select为true的数据。 var _proList=this.productList.filter(function (val) { return val.select}),totalPrice=0; for(var i=0,len=_proList.length;i<len;i++){ //总价累加 totalPrice+=_proList[i].pro_num*_proList[i].pro_price; } //选择产品的件数就是_proList.length，总价就是totalPrice return {totalNum:_proList.length,totalPrice:totalPrice} } }, methods: { //全选与取消全选 selectProduct:function(_isSelect){ //遍历productList，全部取反 for (var i = 0, len = this.productList.length; i < len; i++) { this.productList[i].select = !_isSelect; } }, //删除已经选中(select=true)的产品 deleteProduct:function () { this.productList=this.productList.filter(function (item) {return !item.select}) }, //删除单条产品 deleteOneProduct:function (index) { //根据索引删除productList的记录 this.productList.splice(index,1); }, }, mounted: function () { var _this=this; //为productList添加select（是否选中）字段，初始值为true this.productList.map(function (item) { _this.$set(item, 'select', true); }) } }) </script> </html></code></pre> <h2>5.todoList</h2> <h3>运行效果</h3> <p><img src="https://simg.open-open.com/show/62a1d2a0c400421b7774f857f4a9008f.gif"></p> <h3>原理分析和实现</h3> <p>首先，还是先把布局写好，和引入vue，准备vue实例，这个不多说，代码如下</p> <pre> <code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{font-family: "微软雅黑";font-size: 14px;} input{font-size: 14px;} body,ul,div,html{padding: 0;margin: 0;} .hidden{display: none;} .main{width: 800px;margin: 0 auto;} li{list-style-type: none;line-height: 40px;position: relative;border: 1px solid transparent;padding: 0 20px;} li .type-span{display: block;width: 10px;height: 10px;background: #ccc;margin: 14px 10px 0 0 ;float: left;} li .close{position: absolute;color: #f00;font-size: 20px;line-height: 40px;height: 40px;right: 20px;cursor: pointer;display: none;top: 0;} li:hover{border: 1px solid #09f;} li:hover .close{display: block;} li .text-keyword{height: 40px;padding-left: 10px;box-sizing: border-box;margin-left: 10px;width: 80%;display: none;} .text-keyword{box-sizing: border-box;width: 100%;height: 40px;padding-left: 10px;outline: none;} </style> </head> <body> <div id="app" class="main"> <h2>小目标列表</h2> <div class="list"> <h3>添加小目标</h3> <input type="text" class="text-keyword" placeholder="输入小目标后，按回车确认"/> <p>共有N个目标</p> <p> <input type="radio" name="chooseType" checked="true"/><label>所有目标</label> <input type="radio" name="chooseType"/><label>已完成目标</label> <input type="radio" name="chooseType"/><label>未完成目标</label> </p> </div> <ul> <li class="li1"> <div> <span class="type-span"></span> <span>html5</span> <span class="close">X</span> </div> </li> <li class="li1"> <div> <span class="type-span"></span> <span>css3</span> <span class="close">X</span> </div> </li> </ul> </div> </body> <script src="vue2.4.2.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { }, computed:{ }, methods:{ } }); </script> </html></code></pre> <p>布局有了，相当于一个骨架就有了，下面实现功能，一个一个来</p> <h3>步骤1</h3> <p>输入并回车，多一条记录。下面的记录文字也会改变</p> <p><img src="https://simg.open-open.com/show/48b254ed3c310f442fb4a083e1a8a690.png"></p> <p>首先，大的输入框回车要添加纪录，那么输入框必须绑定一个值和一个添加纪录的方法。</p> <p>代码如下：</p> <p>然后，下面的记录也要改变，所以，下面的记录也要帮一个值，因为这个记录可能会有多个，这个值就是一个数组，也可以看到，记录除了名称，还有记录是否完成的状态，所以，绑定记录的这个值肯定是一个对象数组！代码如下</p> <p>最后，记录文字</p> <p><img src="https://simg.open-open.com/show/81ee74dca85e367e2f9c623664121c06.png"></p> <p>要改变。这个只是一个当前记录的长度即可！</p> <p>为了着重表示我修改了什么地方，代码我现在只贴出修改的部分，大家对着上面的布局，就很容易知道我改的是什么地方了！下面也是这样操作！</p> <p>html代码</p> <pre> <code class="language-html"><!--利用v-model把addText绑定到input--> <input type="text" class="text-keyword" placeholder="输入小目标后，按回车确认" @keyup.13='addList' v-model="addText"/> <p>共有{{prolist.length}}个目标</p> <!--v-for遍历prolist--> <li class="li1" v-for="list in prolist"> <div> <span class="type-span"></span> <span>{{list.name}}</span> <span class="close">X</span> </div> </li></code></pre> <p>js代码</p> <pre> <code class="language-html">new Vue({ el: "#app", data: { addText:'', //name-名称,status-完成状态 prolist:[ {name:"HTML5",status:false}, {name:"CSS3",status:false}, {name:"vue",status:false}, {name:"react",status:false} ] }, computed:{ }, methods:{ addList(){ //添加进来默认status=false,就是未完成状态 this.prolist.push({ name:this.addText, status:false }); //添加后，清空addText this.addText=""; } } });</code></pre> <p>测试一下，没问题</p> <p><img src="https://simg.open-open.com/show/26dfdfab7995e774b6dac68a652d77a5.gif"></p> <h3>步骤2</h3> <p>点击切换，下面记录会改变</p> <p><img src="https://simg.open-open.com/show/243050df2931fc44e0704c9f7e143294.png"></p> <p>看到三个选项，也很简单，无非就是三个选择，一个是所有的目标，一个是所有已经完成的目标，一个是所有没完成的目标。</p> <p>首先.新建一个新的变量（newList），储存prolist。遍历的时候不再遍历prolist，而是遍历newList。改变也是改变newList。</p> <p>然后.选择所有目标的时候，显示全部prolist，把prolist赋值给newList。</p> <p>然后.选择所有已经完成目标的时候，只显示prolist中，status为true的目标，把prolist中，status为true的项赋值给newList，</p> <p>最后.选择所有未完成目标的时候，只显示status为false的目标，把prolist中，status为false的项赋值给newList。</p> <p>代码如下</p> <p>html</p> <pre> <code class="language-html"><ul> <li class="li1" v-for="list in newList"> <div> <span class="status-span"></span> <span>{{list.name}}</span> <span class="close" @click='delectList(index)'>X</span> </div> </li> </ul></code></pre> <p>js</p> <pre> <code class="language-html">new Vue({ el: "#app", data: { addText:'', //name-名称,status-完成状态 prolist:[ {name:"HTML5",status:false}, {name:"CSS3",status:false}, {name:"vue",status:false}, {name:"react",status:false} ], newList:[] }, computed:{ noend:function(){ return this.prolist.filter(function(item){ return !item.status }).length; } }, methods:{ addList(){ //添加进来默认status=false,就是未完成状态 this.prolist.push({ name:this.addText, status:false }); //添加后，清空addText this.addText=""; }, chooseList(type){ //type=1时，选择所有目标 //type=2时，选择所有已完成目标 //type=3时，选择所有未完成目标 switch(type){ case 1:this.newList=this.prolist;break; case 2:this.newList=this.prolist.filter(function(item){return item.status});break; case 3:this.newList=this.prolist.filter(function(item){return !item.status});break; } }, delectList(index){ //根据索引，删除数组某一项 this.prolist.splice(index,1); //更新newList newList可能经过this.prolist.filter()赋值，这样的话，删除了prolist不会影响到newList 那么就要手动更新newList this.newList=this.prolist; }, }, mounted(){ //初始化，把prolist赋值给newList。默认显示所有目标 this.newList=this.prolist; } });</code></pre> <p>运行结果</p> <p><img src="https://simg.open-open.com/show/f0b0e54657c62232f794f9503e7eb6a9.gif"></p> <h3>步骤3</h3> <p>红色关闭标识，点击会删除该记录。前面按钮点击会切换该记录完成状态，颜色也改变，记录文字也跟着改变</p> <p><img src="https://simg.open-open.com/show/73fb5fcdaa2e51ac79bae5e3509db79f.png"></p> <p>首先点击红色关闭标识，点击会删除该记录。这个应该没什么问题，就是删除prolist的一条记录！</p> <p>然后前面按钮点击会切换该记录完成状态。这个也没什么，就是改变prolist的一条记录的status字段！</p> <p>最后记录文字的改变，就是记录prolist中status为false的有多少条，prolist中status为true的有多少条而已</p> <p>html代码</p> <pre> <code class="language-html"><!--如果noend等于0，就是全部完成了就显示‘全部完成了’，如果没有就是显示已完成多少条（prolist.length-noend）和未完成多少条（noend）--> <p>共有{{prolist.length}}个目标，{{noend==0?"全部完成了":'已完成'+(prolist.length-noend)+'，还有'+noend+'条未完成'}}</p></code></pre> <pre> <code class="language-html"><ul> <li class="li1" v-for="(list,index) in newList"> <div> <span class="status-span" @click="list.status=!list.status" :class="{'status-end':list.status}"></span> <span>{{list.name}}</span> <span class="close" @click='delectList(index)'>X</span> </div> </li> </ul></code></pre> <p>js</p> <pre> <code class="language-html">new Vue({ el: "#app", data: { addText:'', //name-名称,status-完成状态 prolist:[ {name:"HTML5",status:false}, {name:"CSS3",status:false}, {name:"vue",status:false}, {name:"react",status:false} ], newList:[] }, computed:{ //计算属性，返回未完成目标的条数，就是数组里面status=false的条数 noend:function(){ return this.prolist.filter(function(item){ return !item.status }).length; } }, methods:{ addList(){ //添加进来默认status=false,就是未完成状态 this.prolist.push({ name:this.addText, status:false }); //添加后，清空addText this.addText=""; }, chooseList(type){ switch(type){ case 1:this.newList=this.prolist;break; case 2:this.newList=this.prolist.filter(function(item){return item.status});break; case 3:this.newList=this.prolist.filter(function(item){return !item.status});break; } }, delectList(index){ //根据索引，删除数组某一项 this.prolist.splice(index,1); //更新newList newList可能经过this.prolist.filter()赋值，这样的话，删除了prolist不会影响到newList 那么就要手动更新newList this.newList=this.prolist; }, }, mounted(){ this.newList=this.prolist; } });</code></pre> <p>运行结果</p> <p><img src="https://simg.open-open.com/show/7046c3c9f40736bb8e118a6b359a8d7c.gif"></p> <h3>步骤4</h3> <p>文字双击会出现输入框，可输入文字，如果回车或者失去焦点，就改变文字，如果按下ESC就恢复原来的文字</p> <p><img src="https://simg.open-open.com/show/3f29bc23f564012bf2d7bdd96b5dcd59.png"></p> <p>首先.双击出现输入框，就是双击文字后，给当前的li设置一个类名（‘ eidting ’），然后写好样式。当li出现这个类名的时候，就出现输入框，并且隐藏其它内容。</p> <p>然后.回车或者失去焦点，就改变文字这个只需要操作一个，就是把类名（‘ eidting ’）清除掉。然后输入框就会隐藏，其它内容显示！</p> <p>最后.按下ESC就恢复原来的文字，就是出现输入框的时候，用一个变量（‘ beforeEditText ’）先保存当前的内容，然后按下了ESC，就把变量（‘ beforeEditText ’）赋值给当前操作的值！</p> <p>代码如下：</p> <p>html</p> <pre> <code class="language-html"><ul> <li class="li1" v-for="(list,index) in newList" :class="{'eidting':curIndex===index}"> <div> <span class="status-span" @click="list.status=!list.status" :class="{'status-end':list.status}"></span> <span @dblclick="curIndex=index">{{list.name}}</span> <span class="close" @click='delectList(index)'>X</span> </div> <input type="text" class="text2" v-model='list.name' @keyup.esc='cancelEdit(list)' @blur='edited' @focus='editBefore(list.name)' @keyup.enter='edited'/> </li> </ul></code></pre> <p>css(加上)</p> <pre> <code class="language-html">li div{display: block;} li.eidting div{display: none;} li .text2{height: 40px;padding-left: 10px;box-sizing: border-box;margin-left: 10px;width: 80%;display: none;} li.eidting .text2{display: block;}</code></pre> <p>js</p> <pre> <code class="language-html">methods:{ addList(){ //添加进来默认status=false,就是未完成状态 this.prolist.push({ name:this.addText, status:false }); //添加后，清空addText this.addText=""; }, chooseList(type){ //type=1时，选择所有目标 //type=2时，选择所有已完成目标 //type=3时，选择所有未完成目标 switch(type){ case 1:this.newList=this.prolist;break; case 2:this.newList=this.prolist.filter(function(item){return item.status});break; case 3:this.newList=this.prolist.filter(function(item){return !item.status});break; } }, delectList(index){ //根据索引，删除数组某一项 this.prolist.splice(index,1); //更新newList newList可能经过this.prolist.filter()赋值，这样的话，删除了prolist不会影响到newList 那么就要手动更新newList this.newList=this.prolist; }, //修改前 editBefore(name){ //先记录当前项（比如这一项，{name:"HTML5",status:false}） //beforeEditText="HTML5" this.beforeEditText=name; }, //修改完成后 edited(){ //修改完了，设置curIndex=""，这样输入框就隐藏，其它元素就会显示。因为在li元素 写了：:class="{'eidting':curIndex===index}" 当curIndex不等于index时，eidting类名就清除了！ //输入框利用v-model绑定了当前项（比如这一项，{name:"HTML5",status:false}）的name,当在输入框编辑的时候，比如改成‘HTML’,实际上当前项的name已经变成了‘HTML’，所以，这一步只是清除eidting类名，隐藏输入框而已 //还有一个要注意的就是虽然li遍历的是newList，比如改了newList的这一项（{name:"HTML5",status:false}），比如改成这样（{name:"HTML",status:true}）。实际上prolist的这一项（{name:"HTML5",status:false}），也会被改成（{name:"HTML",status:true}）。因为这里是一个对象，而且公用一个堆栈！修改其中一个，另一个会被影响到 this.curIndex=""; }, //取消修改 cancelEdit(val){ //上面说了输入框利用v-model绑定了当前项（比如这一项，{name:"HTML5",status:false}）的name,当在输入框编辑的时候，比如改成‘HTML’,实际上当前项的name已经变成了‘HTML’，所以，这一步就是把之前保存的beforeEditText赋值给当前项的name属性，起到一个恢复原来值得作用！ val.name=this.beforeEditText; this.curIndex=""; } },</code></pre> <p>运行结果</p> <p><img src="https://simg.open-open.com/show/20c49be740e745c8d8182d453caaa6f7.gif"></p> <p>还有一个小细节，大家可能注意到了，就是双击文字，出来输入框的时候，还要自己手动点击一下，才能获得焦点，我们想双击了，输入框出来的时候，自动获取焦点，怎么办？自定义指令就行了！</p> <pre> <code class="language-html">computed:{...}, methods:{...}, mounted(){...}, directives:{ "focus":{ update(el){ el.focus(); } } }</code></pre> <p>然后html 调用指令</p> <pre> <code class="language-html"><input type="text" class="text2" v-model='list.name' @keyup.esc='cancelEdit(list)' @blur='edited' @focus='editBefore(list.name)' @keyup.enter='edited' v-focus/></code></pre> <h3>完整代码</h3> <pre> <code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{font-family: "微软雅黑";font-size: 14px;} input{font-size: 14px;} body,ul,div,html{padding: 0;margin: 0;} .hidden{display: none;} .main{width: 800px;margin: 0 auto;} li{list-style-type: none;line-height: 40px;position: relative;border: 1px solid transparent;padding: 0 20px;} li .status-span{display: block;width: 10px;height: 10px;background: #ccc;margin: 14px 10px 0 0 ;float: left;} li .status-span.status-end{ background: #09f; } li .close{position: absolute;color: #f00;font-size: 20px;line-height: 40px;height: 40px;right: 20px;cursor: pointer;display: none;top: 0;} li:hover{border: 1px solid #09f;} li:hover .close{display: block;} li div{display: block;} li.eidting div{display: none;} li .text2{height: 40px;padding-left: 10px;box-sizing: border-box;margin-left: 10px;width: 80%;display: none;} li.eidting .text2{display: block;} li .text-keyword{height: 40px;padding-left: 10px;box-sizing: border-box;margin-left: 10px;width: 80%;display: none;} .text-keyword{box-sizing: border-box;width: 100%;height: 40px;padding-left: 10px;outline: none;} </style> </head> <body> <div id="app" class="main"> <h2>小目标列表</h2> <div class="list"> <h3>添加小目标</h3> <input type="text" class="text-keyword" placeholder="输入小目标后，按回车确认" @keyup.13='addList' v-model="addText"/> <!--如果noend等于0，就是全部完成了就显示‘全部完成了’，如果没有就是显示已完成多少条（prolist.length-noend）和未完成多少条（noend）--> <p>共有{{prolist.length}}个目标，{{noend==0?"全部完成了":'已完成'+(prolist.length-noend)+'，还有'+noend+'条未完成'}}</p> <p> <input type="radio" name="chooseType" checked="true" @click='chooseList(1)'/><label>所有目标</label> <input type="radio" name="chooseType" @click='chooseList(2)'/><label>已完成目标</label> <input type="radio" name="chooseType" @click='chooseList(3)'/><label>未完成目标</label> </p> </div> <ul> <li class="li1" v-for="(list,index) in newList" :class="{'eidting':curIndex===index}"> <div> <span class="status-span" @click="list.status=!list.status" :class="{'status-end':list.status}"></span> <span @dblclick="curIndex=index">{{list.name}}</span> <span class="close" @click='delectList(index)'>X</span> </div> <input type="text" class="text2" v-model='list.name' @keyup.esc='cancelEdit(list)' @blur='edited' @focus='editBefore(list.name)' @keyup.enter='edited' v-focus/> </li> </ul> </div> </body> <script src="vue2.4.2.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { addText:'', //name-名称,status-完成状态 prolist:[ {name:"HTML5",status:false}, {name:"CSS3",status:false}, {name:"vue",status:false}, {name:"react",status:false} ], newList:[], curIndex:'', beforeEditText:"" }, computed:{ //计算属性，返回未完成目标的条数，就是数组里面status=false的条数 noend:function(){ return this.prolist.filter(function(item){ return !item.status }).length; } }, methods:{ addList(){ //添加进来默认status=false,就是未完成状态 this.prolist.push({ name:this.addText, status:false }); //添加后，清空addText this.addText=""; }, chooseList(type){ //type=1时，选择所有目标 //type=2时，选择所有已完成目标 //type=3时，选择所有未完成目标 switch(type){ case 1:this.newList=this.prolist;break; case 2:this.newList=this.prolist.filter(function(item){return item.status});break; case 3:this.newList=this.prolist.filter(function(item){return !item.status});break; } }, delectList(index){ //根据索引，删除数组某一项 this.prolist.splice(index,1); //更新newList newList可能经过this.prolist.filter()赋值，这样的话，删除了prolist不会影响到newList 那么就要手动更新newList this.newList=this.prolist; }, //修改前 editBefore(name){ //先记录当前项（比如这一项，{name:"HTML5",status:false}） //beforeEditText="HTML5" this.beforeEditText=name; }, //修改完成后 edited(){ //修改完了，设置curIndex=""，这样输入框就隐藏，其它元素就会显示。因为在li元素 写了：:class="{'eidting':curIndex===index}" 当curIndex不等于index时，eidting类名就清除了！ //输入框利用v-model绑定了当前项（比如这一项，{name:"HTML5",status:false}）的name,当在输入框编辑的时候，比如改成‘HTML’,实际上当前项的name已经变成了‘HTML’，所以，这一步只是清除eidting类名，隐藏输入框而已 //还有一个要注意的就是虽然li遍历的是newList，比如改了newList的这一项（{name:"HTML5",status:false}），比如改成这样（{name:"HTML",status:true}）。实际上prolist的这一项（{name:"HTML5",status:false}），也会被改成（{name:"HTML",status:true}）。因为这里是一个对象，而且公用一个堆栈！修改其中一个，另一个会被影响到 this.curIndex=""; }, //取消修改 cancelEdit(val){ //上面说了输入框利用v-model绑定了当前项（比如这一项，{name:"HTML5",status:false}）的name,当在输入框编辑的时候，比如改成‘HTML’,实际上当前项的name已经变成了‘HTML’，所以，这一步就是把之前保存的beforeEditText赋值给当前项的name属性，起到一个恢复原来值得作用！ val.name=this.beforeEditText; this.curIndex=""; } }, mounted(){ //初始化，把prolist赋值给newList。默认显示所有目标 this.newList=this.prolist; }, directives:{ "focus":{ update(el){ el.focus(); } } } }); </script> </html></code></pre> <h2>6.小结</h2> <p>好了，三个小实例在这里就说完了！别看文章这么长，其实都是基础，可能是我比较啰嗦而已！如果大家能熟透这几个小实例，相信用vue做项目也是信手拈来。基础的语法在这里了，有了基础，高级的写法也不会很难学习！如果以后，我有什么要分享的，我会继续分享。最后一句老话，如果觉得我哪里写错了，写得不好，欢迎指点！</p> <p> </p> <p>来自：https://segmentfault.com/a/1190000010801357</p> <p> </p>