上一主题 下一主题
12下一页
返回列表 发新帖

VUE小实例

[复制链接]

90

主题

262

帖子

685

积分

高级会员

Rank: 4

积分
685
发表于 2021-3-9 16:18:32 | 显示全部楼层 | 阅读模式

Html代码





  Title




<div id="app">
  <div>
    <table><tr><th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr><tr><td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date}}</td>
        <td>{{item.price | showPrice}}</td>
        <td>
          -
          {{item.count}}
          +
        </td>
        <td>
          移除
        </td>
      </tr></table><h2>总价格:{{totalPrice}}</h2>

  </div>
  <div>
    <h2>购物车为空!</h2>
  </div>

</div>





JS代码


const app = new Vue({
  el: '#app',
  data:{
    Books:[
      {id:1,name:'计算机原理',date:'2015-6',price:50,count:1},
      {id:2,name:'认识Python',date:'2016-1',price:100,count:1},
      {id:3,name:'你好,易语言',date:'2015-9',price:200,count:1},
      {id:4,name:'你好,Vue',date:'2013-6',price:100,count:1},
      {id:5,name:'认识Javascprit',date:'2020-6',price:50,count:1},
    ]
  },
  methods:{
    increment(index){
      this.Books[index].count++
    },
    decrement(index){
      this.Books[index].count--
    },
    removeHandle(index){
      this.Books.splice(index,1)

    }
  },
  computed:{
    totalPrice(){
      let totalPrice=0
      for (let i = 0 ;i
Vx:rsnhkx2015  公众号:陈公子的话
回复

使用道具 举报

90

主题

262

帖子

685

积分

高级会员

Rank: 4

积分
685
发表于 2021-3-9 16:19:36 | 显示全部楼层
css怎么不见了

table{
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th,td{
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th{
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;

}

Vx:rsnhkx2015  公众号:陈公子的话
回复

使用道具 举报

90

主题

262

帖子

685

积分

高级会员

Rank: 4

积分
685
发表于 2021-3-9 16:21:49 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>

  9. <div id="app">
  10.   <div v-if="Books.length">
  11.     <table>
  12.       <thead>
  13.       <tr>
  14.         <th></th>
  15.         <th>书籍名称</th>
  16.         <th>出版日期</th>
  17.         <th>价格</th>
  18.         <th>购买数量</th>
  19.         <th>操作</th>
  20.       </tr>
  21.       </thead>
  22.       <tbody>
  23.       <tr v-for="(item,index) in Books">
  24.         <td>{{item.id}}</td>
  25.         <td>{{item.name}}</td>
  26.         <td>{{item.date}}</td>
  27.         <td>{{item.price | showPrice}}</td>
  28.         <td>
  29.           <button @click="decrement(index)" :disabled="item.count<=1">-</button>
  30.           {{item.count}}
  31.           <button @click="increment(index)">+</button>
  32.         </td>
  33.         <td>
  34.           <button @click="removeHandle(index)">移除</button>
  35.         </td>
  36.       </tr>
  37.       </tbody>
  38.     </table>
  39.     <h2>总价格:{{totalPrice}}</h2>

  40.   </div>
  41.   <div v-else>
  42.     <h2>购物车为空!</h2>
  43.   </div>

  44. </div>


  45. <script src="../JS/vue.js"></script>
  46. <script src="main.js"></script>
  47. </body>
  48. </html>
复制代码
Vx:rsnhkx2015  公众号:陈公子的话
回复

使用道具 举报

90

主题

262

帖子

685

积分

高级会员

Rank: 4

积分
685
发表于 2021-3-9 16:23:23 | 显示全部楼层
  1. const app = new Vue({
  2.   el: '#app',
  3.   data:{
  4.     Books:[
  5.       {id:1,name:'计算机原理',date:'2015-6',price:50,count:1},
  6.       {id:2,name:'认识Python',date:'2016-1',price:100,count:1},
  7.       {id:3,name:'你好,易语言',date:'2015-9',price:200,count:1},
  8.       {id:4,name:'你好,Vue',date:'2013-6',price:100,count:1},
  9.       {id:5,name:'认识Javascprit',date:'2020-6',price:50,count:1},
  10.     ]
  11.   },
  12.   methods:{
  13.     increment(index){
  14.       this.Books[index].count++
  15.     },
  16.     decrement(index){
  17.       this.Books[index].count--
  18.     },
  19.     removeHandle(index){
  20.       this.Books.splice(index,1)

  21.     }
  22.   },
  23.   computed:{
  24.     totalPrice(){
  25.       let totalPrice=0
  26.       for (let i = 0 ;i<this.Books.length;i++)
  27.       {
  28.         totalPrice += this.Books[i].price*this.Books[i].count
  29.       }
  30.       return totalPrice

  31.     },
  32.   },
  33.   filters:{
  34.     showPrice(price){
  35.       return  "¥" + price.toFixed(2)
  36.     },
  37.   }

  38. })
复制代码
Vx:rsnhkx2015  公众号:陈公子的话
回复

使用道具 举报

43

主题

426

帖子

619

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
619
发表于 2021-3-10 09:41:03 | 显示全部楼层
可能有些代码会被检测过滤掉,下次看看有没有什么办法解决...
上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
回复

使用道具 举报

90

主题

262

帖子

685

积分

高级会员

Rank: 4

积分
685
发表于 2021-3-10 09:46:23 | 显示全部楼层
王一之 发表于 2021-3-10 09:41
可能有些代码会被检测过滤掉,下次看看有没有什么办法解决...

行 哥哥
Vx:rsnhkx2015  公众号:陈公子的话
回复

使用道具 举报

43

主题

426

帖子

619

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
619
发表于 2021-3-10 09:54:39 | 显示全部楼层

现在的markdown编辑器太拉跨了...后面可能自己开发....心疼购买钱
上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
回复

使用道具 举报

90

主题

262

帖子

685

积分

高级会员

Rank: 4

积分
685
发表于 2021-3-10 09:57:06 | 显示全部楼层
王一之 发表于 2021-3-10 09:54
现在的markdown编辑器太拉跨了...后面可能自己开发....心疼购买钱

哥哥直接用其他论坛的那种编辑器 方便省事 啧啧
Vx:rsnhkx2015  公众号:陈公子的话
回复

使用道具 举报

43

主题

426

帖子

619

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
619
发表于 2021-3-10 10:01:27 | 显示全部楼层
小陈 发表于 2021-3-10 09:57
哥哥直接用其他论坛的那种编辑器 方便省事 啧啧

啥意思,什么编辑器?
上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
回复

使用道具 举报

90

主题

262

帖子

685

积分

高级会员

Rank: 4

积分
685
发表于 2021-3-10 10:05:58 | 显示全部楼层
王一之 发表于 2021-3-10 10:01
啥意思,什么编辑器?

就其他论坛用的那个  好像是自带的还是啥?  好像用的都是那个  再在上面添加修改点东西 他们
Vx:rsnhkx2015  公众号:陈公子的话
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表