antd table排序 vue_Vue - 基础

最新推荐文章于 2024-05-15 11:08:23 发布

亦雨初

最新推荐文章于 2024-05-15 11:08:23 发布

阅读量703

点赞数

文章标签： antd table排序 vue

本文链接：https://blog.csdn.net/weixin_31767787/article/details/112161625

版权

一：条件渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>if、else if、else</title> <script src="https://cdn.bootcdn.net/ajax/l...

摘要由CSDN通过智能技术生成

一：条件渲染

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>if、else if、else</title>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
 </head>
 <body>
 <div id="box">
     <h3>案例：if、else if、else</h3>
     <h2 v-if="type==='1'">A</h2>
     <h2 v-else-if="type==='2'">B</h2>
     <h2 v-else>C</h2>
 </div>
 </body>
 <script>
     let vm = new Vue({
    
         el: '#box',
         data: {
    
             type: '1',
         }
     })
 </script>
 </html>

二：列表渲染

1. `v-if`+`v-for`+`v-else`控制购物车商品的显示

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>v-if + v-for + v-else控制购物车商品的显示</title>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
     <style>
         table, td {
    
             border: 1px solid black;
             text-align: center;
         }
     </style>
 </head>
 <body>
 <div id="box">
     <h2>我的购物车</h2>
     <button @click="show">刷新购物车</button>
     <br><br>
     <table v-if="!shopping_car.length==0">
         <tr>
             <td>商品名称</td>
             <td>价格</td>
         </tr>
         <tr v-for="item in shopping_car">
             <td>{
    {item.name}}</td>
             <td>{
    {item.price}}</td>
         </tr>
     </table>
     <table v-else>
         <tr>
             <td>商品名称</td>
             <td>价格</td>
         </tr>
         <tr>
             <td>暂无信息</td>
             <td>暂无信息</td>
         </tr>
     </table>
 </div>
 </body>
 <script>
     let vm = new Vue({
    
         el: '#box',
         data: {
    
             isActive: false,
             shopping_car: []
         },
         methods: {
    
             show() {
    
                 this.shopping_car = [
                     {
    name: 'Threadripper 3990X', price: '29999元'},
                     {
    name: 'NVIDIA RTX 8000', price: '59999元'},
                     {
    name: 'ROG ZENITH II EXTREME', price: '9999元'},
                 ]
             }
         }
     })
 </script>
 </html>

2. `v-for`遍历数组(列表)、对象(字典)、数字

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>v-for遍历数组(列表)、对象(字典)</title>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
     <style>
         table, td {
    
             border: 1px solid black;
             text-align: center;
         }
     </style>
 </head>
 <body>
 
 <div id="box">
     <h2>数组（列表）for循环遍历</h2>
     <ul>
         <li v-for="(value,index) in list_test">{
    {index}} —— {
    {value}}</li>
     </ul>
 
     <h2>对象（字典）for循环遍历</h2>
     <ul>
         <li v-for="(value,key) in dic_test">{
    {key}} —— {
    {value}}</li>
     </ul>
 
     <h2>数组（列表）套对象（字典）for循环遍历</h2>
     <table>
         <tr>
             <td>姓名</td>
             <td>年龄</td>
             <td>性别</td>
             <td>国籍</td>
         </tr>
         <tr v-for="info in summary_test">
             <td>{
    {info.name}}</td>
             <td>{
    {info.age}}</td>
             <td>{
    {info.gender}}</td>
             <td>{
    {info.country}}</td>
         </tr>
     </table>
 </div>
 </body>
 <script>
     let vm = new Vue({
    
         el: '#box',
         data: {
    
             list_test: ['First', 'second', 'Third', 'Forth', 'Fifth'],
             dic_test:{
    name: 'Darker', age: 18, gender: 'male'},
             summary_test: [
                     {
    name: 'Alan', age: 23, gender: 'male', country: 'America'},
                     {
    name: 'Ben', age: 15, gender: 'male', country: 'Australia'},
                     {
    name: 'Cindy', age: 12, gender: 'female', country: 'Japan'},
                     {
    name: 'Darker', age: 18, gender:

最低0.47元/天解锁文章

亦雨初

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
antd table排序 vue_Vue - 基础

一：条件渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>if、else if、else</title> <script src="https://cdn.bootcdn.net/ajax/l...
复制链接

扫一扫