vue3 vue的常用指令

 

 

vue的常用指令

指令 (Directives) 是带有“v-”前缀的特殊属性，由vue提供的。每一个指令在vue中都有固定的作用。

在vue中提供了很多指令，常用的有：{{变量名}},v-if、v-model、v-for、v-html、@事件名或:属性名=等等。

指令会在vm对象的data选项数据发生变化时，会同时改变元素中的其控制的内容或属性。

因为vue的历史版本原因，所以有一部分指令都有两种写法：

 

vue1.xvue2.x以后描述
v-html v-html 输出html内容到双标签中
v-text="普通文本" {{普通文本}} 输出纯文本内容到双标签中
v-bind:属性名 :属性名 把属性中的内容当成vue变量进行输出
v-on:事件名 @事件名 绑定事件操作

 

 

属性操作

格式：

<标签名 :标签属性="data变量名"></标签名>

 

三种方式
<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容，{{  }} 是简写 -->
<a :href="url2">淘宝</a>  变量写法
<a v-bind:href="url1">百度</a>  <!-- v-bind是vue1.x版本的写法 -->

显示/隐藏密码

代码：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
</head>
<body>
    <div id="app">
        密码:<input :type="input_type"><button @click="show_password">{{btn_text}}</button>
    </div>
<script>
      var vm = Vue.createApp({
        data(){
          return {
              input_type: 'password',
              btn_text:'显示密码',
          }
        },
          methods: {
            show_password(){
                // 显示密码
                if(this.input_type == "password"){
                    this.input_type = "text";
                    this.btn_text = "隐藏密码";
                }else{
                    this.input_type = "password";
                    this.btn_text = "显示密码";
                }

            }
          }
      }).mount("#app");
      </script>

</body>
</html>

 

 

 

事件绑定

基本写法

 

<标签名 @click="num+=5">按钮</标签名>
<标签名 @click="方法名">按钮</标签名>
<标签名 @click="方法名(参数1,参数2,....)">按钮</标签名>

vue中常用事件的写法对照：

vue写法原生javascript写法描述
@click onclick 鼠标点击事件
@dblclick ondblclick 鼠标双击事件
@submit onsubmit 表单提交事件
@focus onfocus 获取焦点事件
@blur onblur 失去焦点事件
@change onchange 值发生改变事件
.... ... ...

 

商品增加减少数量

步骤：

  1. 给vue对象添加操作数据的方法

  2. 在标签中使用指令调用操作数据的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
</head>
<body>
    <div id="app">
        <button @click="sub">-</button>
        <input type="text" v-model.number="num" size="2" @change="check_num">
        <button @click="num++">+</button>
    </div>
<script>
       var vm = Vue.createApp({
          data(){
            return {
                num: 0,
            }
          },
            methods: {
              sub(){
                  if(this.num<=0){
                      return false
                  }
                  this.num--;
              },
              check_num(){
                  if(this.num<=0){
                      this.num = 0;
                  }

              }

          }
      }).mount("#app");
      </script>

</body>
</html>

 

 

基于事件操作，完成表单的数据校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
        span.tips{
            font-size: 12px;
            color: red;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        登录账号:<input type="text" placeholder="请输入账号" v-model="username" @blur="check_username" @focus="clear_tips('username_tip')">
        <span class="tips" ref="username_tip"></span><br>
        登录密码:<input type="password" placeholder="请输入密码" v-model="password" @blur="check_password" @focus="clear_tips('password_tip')">
        <span class="tips" ref="password_tip"></span><br>
        确认密码:<input type="password" placeholder="请输入确认密码!" v-model="password2" @blur="check_password2" @focus="clear_tips('password2_tip')">
        <span class="tips" ref="password2_tip"></span><br>
        <input type="submit" value="注册" @click="submit_form">
    </div>
<script>
       var vm = Vue.createApp({
          data(){
            return {
                username:"root",
                password:'',
                password2:'',
            }
          },
            methods: {
                check_username(){
                    if(this.username.length<4|| this.username.length >12){
                        this.$refs.username_tip.innerHTML = "请输入4-12个字符长度的登录账号";
                        return true;
                    }
                },
                clear_tips(name){
                    this.$refs[name].innerHTML ="";
                },
                check_password(){
                    if(this.password.length<6||this.password.length>16){
                        this.$refs.password_tip.innerHTML = "请输入6-16个字符长度的登录密码";
                        return true;
                    }
                },
                check_password2(){
                    //验证密码与确认密码是否一样
                    if(this.password !== this.password2){
                        this.$refs.password2_tip.innerHTML = "登录密码与确认密码必须一致";
                        return true;
                    }
                },
                submit_form(){
                    if(this.check_username()||this.check_password()||this.check_password2()){
                        console.log("验证失败,无法提交数据");
                        return false;
                    }

                }

          }
      }).mount("#app");
      </script>

</body>
</html>

 

 

 

操作样式

操作样式，本质就是属性操作，使用冒号

 

2.3.1 控制标签class类名

格式：
   <h1 :class="值">元素</h1>  # 值可以是变量名、对象、对象的变量名、数组、数组变量

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
        .p1{
            background-color: yellow;
        }
        .p2{
            color: red;
        }
    </style>

</head>
<body>
    <div id="app">
        <p>用法1：:class属性值是一个class类名的变量</p>
        <p :class="cls1">一段文本信息</p>
        <hr>
        <p>用法2：:class属性值是一个json对象</p>
        <p :class="{p1:b1,p2:b2}">一段文本信息</p>
        

    </div>
<script>
       var vm = Vue.createApp({
          data(){
            return {
                cls1: "p1",
                b1: true,
                b2:true,

            }
          },
            methods: {



          }
      }).mount("#app");
      </script>

</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
        .p1{
            background-color: yellow;
        }
        .p2{
            color: red;
        }
    </style>

</head>
<body>
    <div id="app">
        <!--<p>用法1：:class属性值是一个class类名的变量</p>-->
        <!--<p :class="cls1">一段文本信息</p>-->
        <!--<hr>-->
        <!--<p>用法2：:class属性值是一个json对象</p>-->
        <!--<p :class="{p1:b1,p2:b2}">一段文本信息</p>-->
        <hr>
        <p>用法3：:class属性值是一个对象变量名</p>
        <p :class="p_clsl">一段文本信息</p>



    </div>
<script>
       var vm = Vue.createApp({
          data(){
            return {
                cls1: "p1",
                b1: true,
                b2:true,
                p_clsl:{
                    p1:true,
                    p2:true,
              }

            }
          },
            methods: {



          }
      }).mount("#app");
      </script>

</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
        .p1{
            background-color: yellow;
        }
        .p2{
            color: red;
        }
    </style>

</head>
<body>
    <div id="app">
        <!--<p>用法1：:class属性值是一个class类名的变量</p>-->
        <!--<p :class="cls1">一段文本信息</p>-->
        <!--<hr>-->
        <!--<p>用法2：:class属性值是一个json对象</p>-->
        <!--<p :class="{p1:b1,p2:b2}">一段文本信息</p>-->
        <!--<hr>-->
        <!--<p>用法3：:class属性值是一个对象变量名</p>-->
        <!--<p :class="p_clsl">一段文本信息</p>-->
        <p>用法4：:class属性值是一个数组，数组的成员是data中声明的用于控制样式的json对象</p>
        <p :class="[cls2,cls3]">一段文本信息</p>
        <hr>
        <p>用法5: :class属性值时一个数组变量名</p>
        <p :class="arr">一段文本信息</p>


    </div>
<script>
       var vm = Vue.createApp({
          data(){
            return {
                cls1: "p1",
                b1: true,
                b2:true,
                p_clsl:{
                    p1:true,
                    p2:true,
              },
              cls2:{
                    p2:true,
              },
              cls3:{
                    p1:true,
              },
              arr:[
                  {p1:true},
                  {p2:true},
              ]

            }
          },
            methods: {



          }
      }).mount("#app");
      </script>

</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
        .p1{
            background-color: yellow;
        }
        .p2{
            color: red;
        }
    </style>

</head>
<body>
    <div id="app">
        <!--<p>用法1：:class属性值是一个class类名的变量</p>-->
        <!--<p :class="cls1">一段文本信息</p>-->
        <!--<hr>-->
        <!--<p>用法2：:class属性值是一个json对象</p>-->
        <!--<p :class="{p1:b1,p2:b2}">一段文本信息</p>-->
        <!--<hr>-->
        <!--<p>用法3：:class属性值是一个对象变量名</p>-->
        <!--<p :class="p_clsl">一段文本信息</p>-->
        <p>用法4：:class属性值是一个数组，数组的成员是data中声明的用于控制样式的json对象</p>
        <p :class="[cls2,cls3]">一段文本信息</p>
        <hr>
        <p>用法5: :class属性值时一个数组变量名</p>
        <p :class="arr">一段文本信息</p>

        <p>注意：:class属性在同一个标签中，只能出现一次，后面出现的:class属性会被vue忽略掉，但是:class可以和class属性组合使用，
            class也只能在同一个标签中出现一次</p>
        <p class="p1" :class="cls2" :class="cls3">一段文本信息</p>


    </div>
<script>
       var vm = Vue.createApp({
          data(){
            return {
                cls1: "p1",
                b1: true,
                b2:true,
                p_clsl:{
                    p1:true,
                    p2:true,
              },
              cls2:{
                    p2:true,
              },
              cls3:{
                    p1:true,
              },
              arr:[
                  {p1:true},
                  {p2:true},
              ]

            }
          },
            methods: {



          }
      }).mount("#app");
      </script>

</body>
</html>

 

 

 

总结：

1. 给元素绑定class类名，最常用的就是第1,2,3种。
    vue对象的data数据：
         data(){
            return {
                cls1: "p1",
                b1: true,
                b2: true,
                p_cls1: {
                  p1: true,
                  p2: false
                },
                cls2: {
                  p2: true,
                },
            }
          },

        html元素：    
            <div class="p1" :class="cls2">2222</div>
    最终浏览器效果：
            <div class="p1 p2">2222</div>

 

控制标签style样式

工作中基本很少出现style控制样式，一个规范不允许，另一个就是代码不好维护

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>


</head>
<body>
    <div id="app">
        <p>用法1：:style的值是一个json对象</p>
        <p :style="{'font-size': size, color: col1}">一段文本信息</p>
        <hr>
        <p>用法2：:style的值是一个对象变量名</p>
        <p :style="sty1">一段文本信息</p>
        <hr>
        <p>用法3：:style的值是一个数组，数组的成员是样式组成的对象</p>
        <p :style="[sty2,sty3]"></p>
        <p>用法4：:style的值是一个数组变量名</p>
        <p :style="sty_list"></p>



    </div>
<script>
         var obj = {
            backgroundColor: "red",
            "border-radius": "100%",
        }
       var vm = Vue.createApp({
          data(){
            return {
                size: '24px',
                col1: 'red',
                 sty1: {
                  "text-align": "center",
                  "color": "yellow",
                  "background-color": "red",
                },
                 sty2: {
                  "width": '150px',
                  "height": '150px',
                },
                sty3: {
                  "background-color": "red",
                },
                sty_list: [
                    obj,{
                    "width": '150px',
                      "height": '150px',
                    },

                ]


            }
          },
            methods: {



          }
      }).mount("#app");
      </script>

</body>
</html>

 

 

基本样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="assets/vue.global.3.2.20.js"></script>
    <style>
    p{
        padding: 0;
        margin: 0;
    }
    .title-list span{
        display: inline-block; /* 设置元素的显示模式：行级块状元素 */
        height: 60px;
        line-height: 60px;
        width: 120px;
        background-color: #bbb;
        text-align: center;
        cursor: pointer;
    }
    .title-list .activate{
        background-color: yellow;
    }
    .content-list .content{
        background-color: yellow;
        display: none;
        width: 370px;
        height: 280px;
    }
    .content-list .current{
        display: block;
    }
    </style>
</head>
<body>
    <div id="optioncard">
        <div class="title-list">
            <span class="activate">国内新闻</span>
            <span>国际新闻</span>
            <span>银河新闻</span>
        </div>
        <div class="content-list">
            <div class="content current">
                <p>国内新闻列表</p>
                <p>国内新闻列表</p>
                <p>国内新闻列表</p>
                <p>国内新闻列表</p>
                <p>国内新闻列表</p>
            </div>
            <div class="content current">
                <p>国际新闻列表</p>
                <p>国际新闻列表</p>
                <p>国际新闻列表</p>
                <p>国际新闻列表</p>
                <p>国际新闻列表</p>
            </div>
            <div class="content">
                <p>银河新闻列表</p>
                <p>银河新闻列表</p>
                <p>银河新闻列表</p>
                <p>银河新闻列表</p>
                <p>银河新闻列表</p>
            </div>
        </div>
    </div>
    <script>

    </script>
</body>
</html>

 

特效实现，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
    p{
        padding: 0;
        margin: 0;
    }
    .title-list span{
        display: inline-block; /* 设置元素的显示模式：行级块状元素 */
        height: 60px;
        line-height: 60px;
        width: 120px;
        background-color: #bbb;
        text-align: center;
        cursor: pointer;
    }
    .title-list .activate{
        background-color: yellow;
    }
    .content-list .content{
        background-color: yellow;
        display: none;
        width: 370px;
        height: 280px;
    }
    .content-list .current{
        display: block;
    }
    </style>

</head>
<body>
   <div id="optioncart">
    <div class="title-list">
        <span :class="{activate: index === 0}" @click="change_index(0)">国内新闻</span>
        <span :class="{activate: index === 1}" @click="change_index(1)">国际新闻</span>
        <span :class="{activate: index === 2}" @click="change_index(2)">银河新闻</span>
    </div>
    <div class="content-list">
        <div class="content" :class="{current: index === 0}">
            <p>国内新闻列表</p>
            <p>国内新闻列表</p>
            <p>国内新闻列表</p>
            <p>国内新闻列表</p>
            <p>国内新闻列表</p>
        </div>
        <div class="content" :class="{current: index === 1}">
            <p>国际新闻列表</p>
            <p>国际新闻列表</p>
            <p>国际新闻列表</p>
            <p>国际新闻列表</p>
            <p>国际新闻列表</p>
        </div>
        <div class="content" :class="{current: index === 2}">
            <p>银河新闻列表</p>
            <p>银河新闻列表</p>
            <p>银河新闻列表</p>
            <p>银河新闻列表</p>
            <p>银河新闻列表</p>
        </div>
    </div>
</div>
<script>
    var vm = Vue.createApp({
        data(){
            return{
                index: 0,
            }
        },
        methods: {
            change_index(num){
                console.log(num);
                this.index=num;
            },
        }
    }).mount("#optioncart")

      </script>

</body>
</html>

 

 

代码运行效果：

 

 

条件渲染指令

vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="username">欢迎回到xx网站，{{username}}</p>

    </div>

</body>
<script>
        var vm = Vue.createApp({
          data(){
            return {
                username:"root",

            }
          }
        }).mount("#app")
    </script>
</html>

 

 

v-else

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
</head>
<body>
    <div id="app">
         <!-- v-else只能作为子语句，跟在上一个v-if或v--else-if后面，而且只能出现一次,否则后面v-else会覆盖前面的v-else -->
        <p v-if="username">欢迎回到xx网站，{{username}}</p>
        <p v-else>欢迎访问xx网站，尊敬的游客！</p>
        <p v-else>欢迎访问xx网站，尊敬的游客！2</p>


    </div>

</body>
<script>
        var vm = Vue.createApp({
          data(){
            return {
                username:"",

            }
          }
        }).mount("#app")
    </script>
</html>

 

 

v-else-if

v-if后面可以出现0个或多个v-else-if语句，而v-else-if后面可以跟着0个或1个v-else子语句。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
</head>
<body>
    <div id="app">
         <!-- v-else只能作为子语句，跟在上一个v-if或v--else-if后面，而且只能出现一次,否则后面v-else会覆盖前面的v-else -->
        <p v-if="username">欢迎回到xx网站，{{username}}</p>
        <p v-else>欢迎访问xx网站，尊敬的游客！</p>
        <p v-else>欢迎访问xx网站，尊敬的游客！2</p>

        <p v-if="level === 0" class="l0">您是普通会员！</p>
        <p v-else-if="level === 1" class="l1">您是vip会员！</p>
        <p v-else-if="level === 2" class="l2">您是vvip会员！</p>
        <p v-else-if="level === 3" class="l3">您是svip会员！</p>
        <p v-else>您是签到会员！</p>


    </div>

</body>
<script>
        var vm = Vue.createApp({
          data(){
            return {
                username:"",
                level: 0,

            }
          }
        }).mount("#app")
    </script>
</html>

 

v-show

v-show用法和v-if大致一样，区别在于2点：

  1. v-show后面不能v-else或者v-else-if

  2. v-show隐藏元素时，使用的是css样式的display:none来隐藏的，

    而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
</head>
<body>
    <div id="app">
         <!-- v-else只能作为子语句，跟在上一个v-if或v--else-if后面，而且只能出现一次,否则后面v-else会覆盖前面的v-else -->
        <!--<p v-if="username">欢迎回到xx网站，{{username}}</p>-->
        <p v-show="username">[v-show]欢迎回到xx网站，{{username}}</p>
        <p v-show="!username">欢迎回到xx网站，{{username}}</p>
        <!--<p v-else>欢迎访问xx网站，尊敬的游客！</p>-->

        <p v-show="level === 0" class="l0">您是普通会员！</p>
        <p v-show="level === 1" class="l1">您是vip会员！</p>
        <p v-show="level === 2" class="l2">您是vvip会员！</p>
        <p v-show="level === 3" class="l3">您是svip会员！</p>
        <p v-show="![0,1,2,3].includes(level)">您是签到会员！</p>


    </div>

</body>
<script>
        var vm = Vue.createApp({
          data(){
            return {
                username:"",
                level: 0,

            }
          }
        }).mount("#app")
    </script>
</html>

 

 当HTML页面中有使用了vue以外的其他前端插件，这些插件也操作了和vue控制的内容范围重叠的内容，则需要使用v-show。

 

列表渲染指令

在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。

 

book in book_list
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
        .table{
            border-collapse: collapse;
            border: 1px solid red;
            width: 600px;
        }
        .table td,table th{
            border: 1px solid red;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>循环显示数组内容</p>
        <table class="table">
            <tr>
                <th>ID</th>
                <th>title</th>
                <th>price</th>
            </tr>
            <tr v-for="book in book_list">
                <td>{{book.id}}</td>
                <td>{{book.title}}</td>
                <td>{{book.price}}</td>
            </tr>

        </table>
    </div>

</body>
<script>
        var vm = Vue.createApp({
          data(){
            return {
                 book_list:[
                        {"id":11,"title":"图书名称1","price":200},
                        {"id":21,"title":"图书名称2","price":200},
                        {"id":31,"title":"图书名称3","price":200},
                        {"id":41,"title":"图书名称4","price":200},
                    ]

            }
          }
        }).mount("#app")
    </script>
</html>

 

 

 

(book,key) in book_list
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
        .table{
            border-collapse: collapse;
            border: 1px solid red;
            width: 600px;
        }
        .table td,table th{
            border: 1px solid red;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>循环显示数组内容</p>
        <table class="table">
            <tr>
                <th>序号[正序]</th>
                <th>序号[倒序]</th>
                <th>ID</th>
                <th>title</th>
                <th>price</th>
            </tr>
            <!--<tr v-for="book in book_list">-->
            <tr v-for="(book,key) in book_list">
                <td>{{key+1}}</td>
                <td>{{book_list.length-key}}</td>
                <td>{{book.id}}</td>
                <td>{{book.title}}</td>
                <td>{{book.price}}</td>
            </tr>

        </table>
    </div>

</body>
<script>
        var vm = Vue.createApp({
          data(){
            return {
                 book_list:[
                        {"id":11,"title":"图书名称1","price":200},
                        {"id":21,"title":"图书名称2","price":200},
                        {"id":31,"title":"图书名称3","price":200},
                        {"id":41,"title":"图书名称4","price":200},
                    ]

            }
          }
        }).mount("#app")
    </script>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
        .table{
            border-collapse: collapse;
            border: 1px solid red;
            width: 600px;
        }
        .table td,table th{
            border: 1px solid red;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>循环显示数组内容</p>
        <table class="table">
            <tr>
                <th>序号[正序]</th>
                <th>序号[倒序]</th>
                <th>ID</th>
                <th>title</th>
                <th>price</th>
                <th>是否第一行数据</th>-->
                <th>是否最后一行数据</th>-->

            </tr>
            <!--<tr v-for="book in book_list">-->
            <tr v-for="(book,key) in book_list">
                <td>{{key+1}}</td>
                <td>{{book_list.length-key}}</td>
                <td>{{book.id}}</td>
                <td>{{book.title}}</td>
                <td>{{book.price}}</td>
                <td v-if="key===0">√</td>
                <td v-else="">×</td>
                <td v-if="key === book_list.length-1">√</td>-->
                <td v-else>×</td>
            </tr>

        </table>
    </div>

</body>
<script>
        var vm = Vue.createApp({
          data(){
            return {
                 book_list:[
                        {"id":11,"title":"图书名称1","price":200},
                        {"id":21,"title":"图书名称2","price":200},
                        {"id":31,"title":"图书名称3","price":200},
                        {"id":41,"title":"图书名称4","price":200},
                    ]

            }
          }
        }).mount("#app")
    </script>
</html>

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
        .table{
            border-collapse: collapse;
            border: 1px solid red;
            width: 600px;
        }
        .table td,table th{
            border: 1px solid red;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            text-align: center;
        }
        .table attr{
            line-height: 18px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>循环显示对象属性</p>
        <table class="table">
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>价格</th>
                <th>属性</th>

            </tr>
            <tr v-for="(book,key) in book_list">
                <td>{{book.id}}</td>
                <td>{{book.title}}</td>
                <td>{{book.price}}</td>
                <td class="attr">
                    <!--<div v-for="value in book.attr_data">属性名: {{value}}</div>-->
                    <div v-for="(value,attr) in book.attr_data">{{attr}}: {{value}}</div>
                </td>
            </tr>

        </table>
    </div>

</body>
<script>
        var vm = Vue.createApp({
          data(){
            return {
                 book_list: [
                    {"id":31,"title":"图书名称1","price":200, "attr_data": {"正文语种": "英文", "页数": "541", "开本": "16开", "出版时间": "2000-11-01", "出版社": "人民邮电出版社"}},
                    {"id":12,"title":"图书名称2","price":200, "attr_data": {"正文语种": "中文", "页数": "511", "开本": "16开", "出版时间": "2010-11-01", "出版社": "人民邮电出版社"}},
                    {"id":33,"title":"图书名称3","price":200, "attr_data": {"页数": "501", "出版时间": "2019-12-01", "出版社": "人民邮电出版社"}},
                    {"id":54,"title":"图书名称4","price":200, "attr_data": { "页数": "671", "开本": "16开", "出版时间": "2019-03-01", "出版社": "人民邮电出版社"}},
                    {"id":14,"title":"图书名称4","price":200, "attr_data": {}},
                ]

            }
          }
        }).mount("#app")
    </script>
</html>

 

 

 

练习：

goods_list: [
    {"name":"python入门","price":150},
    {"name":"python进阶","price":100},
    {"name":"python高级","price":75},
    {"name":"python研究","price":60},
    {"name":"python放弃","price":110},
]

# 把上面的数据采用table表格输出到页面，价格大于100的一行数据需要添加背景色橙色[orange]

 

第一种方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
        .table{
            border-collapse: collapse;
            border: 1px solid red;
            width: 600px;
        }
        .table td,table th{
            border: 1px solid red;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            text-align: center;
        }
        .bg{
            background-color: orange;
        }

    </style>
</head>
<body>
    <div id="app">
        <p>循环显示对象属性</p>
        <table class="table">
            <tr>
                <th>序号</th>
                <th>商品名字</th>
                <th>价格</th>

            </tr>
            <tr v-for="(good,key) in goods_list" :class="{bg: good.price>100}">
                <td>{{key+1}}</td>
                <td>{{good.name}}</td>
                <td>{{good.price}}</td>
            </tr>

        </table>
    </div>

</body>
<script>
        var vm = Vue.createApp({
          data(){
            return {
                 goods_list: [
                    {"name":"python入门","price":150},
                    {"name":"python进阶","price":100},
                    {"name":"python高级","price":75},
                    {"name":"python研究","price":60},
                    {"name":"python放弃","price":110},
                ]

            }
          }
        }).mount("#app")
    </script>
</html>

 

第二方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
    <style>
        .table{
            border-collapse: collapse;
            border: 1px solid red;
            width: 600px;
        }
        .table td,table th{
            border: 1px solid red;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            text-align: center;
        }
        .bg{
            background-color: orange;
        }

    </style>
</head>
<body>
    <div id="app">
        <p>循环显示对象属性</p>
        <table class="table">
            <tr>
                <th>序号</th>
                <th>商品名字</th>
                <th>价格</th>
                <th>购买数量</th>

            </tr>
            <tr v-for="(goods,key) in goods_list" :class="{bg: goods.price>100}">
                <td>{{key+1}}</td>
                <td>{{goods.name}}</td>
                <td>{{goods.price}}</td>
                <td>
                    <button @click="sub(goods)">-</button>
                    <input type="text" size="1" v-model="goods.num">
                    <button @click="goods.num+=10">+</button>
                </td>
            </tr>

        </table>
    </div>

</body>
<script>
        var vm = Vue.createApp({
          data(){
            return {
                 goods_list: [
                    {"name":"python入门","price":150,num: 0},
                    {"name":"python进阶","price":100,num: 0},
                    {"name":"python高级","price":75,num: 0},
                    {"name":"python研究","price":60,num: 0},
                    {"name":"python放弃","price":110,num: 0},
                ]

            }
          },
          methods: {
              sub(goods){
                  goods.num-=10;
                  if(goods.num<0){
                      goods.num = 0;
                  }

              }
          }
        }).mount("#app")
    </script>
</html>

 

 

 

 

 

posted @ 2025-03-14 02:23  minger_lcm  阅读(110)  评论(0)    收藏  举报