上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
12下一页
返回列表 发新帖

VUE小实例

[复制链接]
  • TA的每日心情
    慵懒
    昨天 10:26
  • 签到天数: 151 天

    [LV.7]常住居民III

    143

    主题

    531

    帖子

    894

    积分

    版主

    Rank: 8Rank: 8

    积分
    894

    三好学生活跃会员热心会员突出贡献宣传达人推广达人喜迎中秋国庆纪念章油中2周年

    发表于 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
    bilibili:陈公子的话   公众号:陈公子的话
  • TA的每日心情
    慵懒
    昨天 10:26
  • 签到天数: 151 天

    [LV.7]常住居民III

    143

    主题

    531

    帖子

    894

    积分

    版主

    Rank: 8Rank: 8

    积分
    894

    三好学生活跃会员热心会员突出贡献宣传达人推广达人喜迎中秋国庆纪念章油中2周年

    发表于 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;

    }

    bilibili:陈公子的话   公众号:陈公子的话
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 10:26
  • 签到天数: 151 天

    [LV.7]常住居民III

    143

    主题

    531

    帖子

    894

    积分

    版主

    Rank: 8Rank: 8

    积分
    894

    三好学生活跃会员热心会员突出贡献宣传达人推广达人喜迎中秋国庆纪念章油中2周年

    发表于 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>
    复制代码
    bilibili:陈公子的话   公众号:陈公子的话
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 10:26
  • 签到天数: 151 天

    [LV.7]常住居民III

    143

    主题

    531

    帖子

    894

    积分

    版主

    Rank: 8Rank: 8

    积分
    894

    三好学生活跃会员热心会员突出贡献宣传达人推广达人喜迎中秋国庆纪念章油中2周年

    发表于 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. })
    复制代码
    bilibili:陈公子的话   公众号:陈公子的话
    回复

    使用道具 举报

  • TA的每日心情
    开心
    5 天前
  • 签到天数: 126 天

    [LV.7]常住居民III

    201

    主题

    2614

    帖子

    2644

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2644

    荣誉开发者喜迎中秋热心会员活跃会员突出贡献三好学生管理员家财万贯油中2周年

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

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 10:26
  • 签到天数: 151 天

    [LV.7]常住居民III

    143

    主题

    531

    帖子

    894

    积分

    版主

    Rank: 8Rank: 8

    积分
    894

    三好学生活跃会员热心会员突出贡献宣传达人推广达人喜迎中秋国庆纪念章油中2周年

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

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

    使用道具 举报

  • TA的每日心情
    开心
    5 天前
  • 签到天数: 126 天

    [LV.7]常住居民III

    201

    主题

    2614

    帖子

    2644

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2644

    荣誉开发者喜迎中秋热心会员活跃会员突出贡献三好学生管理员家财万贯油中2周年

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

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

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 10:26
  • 签到天数: 151 天

    [LV.7]常住居民III

    143

    主题

    531

    帖子

    894

    积分

    版主

    Rank: 8Rank: 8

    积分
    894

    三好学生活跃会员热心会员突出贡献宣传达人推广达人喜迎中秋国庆纪念章油中2周年

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

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

    使用道具 举报

  • TA的每日心情
    开心
    5 天前
  • 签到天数: 126 天

    [LV.7]常住居民III

    201

    主题

    2614

    帖子

    2644

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2644

    荣誉开发者喜迎中秋热心会员活跃会员突出贡献三好学生管理员家财万贯油中2周年

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

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

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 10:26
  • 签到天数: 151 天

    [LV.7]常住居民III

    143

    主题

    531

    帖子

    894

    积分

    版主

    Rank: 8Rank: 8

    积分
    894

    三好学生活跃会员热心会员突出贡献宣传达人推广达人喜迎中秋国庆纪念章油中2周年

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

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

    使用道具 举报

    发表回复

    本版积分规则

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