Vue.js实战

[/url]
[url=https://mp.weixin.qq.com/s?__biz=Mzg5MzAyNDI4Mw==&mid=2247483912&idx=3&sn=4e16e34c2a6d9acb72683fcaeeb98631&scene=21#wechat_redirect]黑客技术点击右侧关注，了解黑客的世界！

Linux编程点击右侧关注，免费入门到精通！

程序员严选甄选正品好物，程序员生活指南！
指令[h1][/h1][h1]什么是指令[/h1]
指令，directives，是vue非常常用的功能，在template里。

都是以v-开头
不是自己所为html元素，比如假设指令叫v-abc，没有
这种写法，这是组件（component）的写法，组件也是vue的一个强大功能
都是在html元素里写，比如
或者
这样子的写法居多
主要都是用于决定是否渲染，怎么渲染的功能

[h1][/h1][h1]v-if指令[/h1]

html元素根据v-if的结果是否为真从而决定是否渲染
放在html元素里，比如div，也可以放在vue的里（v-show不行）
用等于号赋予表达式
表达式需要用等号包裹
表达式里直接写变量名称，变量不需要再用等号包裹，比如
，如果status的值为1，这个div就会渲染显示，否则不显示
如果是字符串，可以加单引号，这么写：
...

注意，cnblogs里不能直接写template标签，要用markdown的单引号包裹起来，否则后面的内容不显示。

[h1][/h1][h1]v-else-if和v-else指令[/h1]

必须和v-if指令配置使用
写法为比如：
...

[h1][/h1][h1]v-for指令[/h1]

列表的循环渲染指令
必须用in来使用
比如：

[h1][/h1][h1]购物车[/h1]
下面通过vue实现一个购物车的增加、减少商品数量，并且自动计算总价格的功能。

实现后的样子如下图：

[h2][/h2][h2]html[/h2]
html的代码如下。

                                                                                                                                          商品名称                         商品单价                         商品数量                         操作                                                                                                                                           {{ index + 1 }}                         {{ item.name }}                         {{ item.price }}                                                                                           -                               {{ item.count }}                                                             +                                                       移除                                                                         总价：￥ {{ totalPrice }}                                  您的购物车为空

[h2]js[/h2][h2][/h2]var app = new Vue({          el: '#app',          data: {             // list是一个数组             list: [                   // id等不需要引号                   { id: 1, name: 'iphone XS', price: 6599, count: 1 },                   { id: 2, name: 'iphone XR', price: 4399, count: 1 },                   { id: 3, name: 'iphone XS Max', price: 7499, count: 1 }             ]          },          computed: {             totalPrice: function () {                   return this.list[0].price * this.list[0].count;             }          },          methods: {             // 方法定义用：号，不能用=号             handleAdd: function (index) {                   this.list[index].count++;             },// 方法之间必须有逗号分隔             handleReduce: function (index) {                   if (this.list[index].count > 0)                      this.list[index].count--;             },             handleRemove: function (index) {                   // js的spilce函数：(start: number, deleteCount?: number)，vscode会提示详细解释。                   this.list.splice(index, 1);             }          }       })
[h2][/h2][h2]css[/h2]
table{          border: 1px solid #e9e9e9;/*表格框宽度、显示、颜色*/          border-collapse: collapse;          border-spacing: 0;          empty-cells: show;       }       th, td{/*表格头和表格体的样式*/          padding: 8px 16px;          border: 1px solid #e9e9e9;/*深灰色*/          text-align: left;          background: white;/*白色*/       }       th{/*表格头的样式*/          background: #f7f7f7;/*表格头的底色：浅灰色*/          color: #5c6b77;          font-weight: 600;          white-space: nowrap;       }

推荐↓↓↓

长
按
关
注
【16个技术公众号】都在这里！
涵盖：程序员大咖、源码共读、程序员共读、数据结构与算法、黑客技术和网络安全、大数据科技、编程前端、Java、Python、Web编程开发、Android、iOS开发、Linux、数据库研发、幽默程序员等。
万水千山总是情，点个 “在看” 行不行