Vue基础--v-model/v-for/事件属性/侦听器

凌晨去看海

于 2024-07-09 23:30:25 发布

阅读量952

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_63624484/article/details/140308650

版权

一 v-model表单元素

1.1 v-model绑定文本域的value

1.1.1 lazy属性：光标离开再发请求

1.1.2 number属性：如果能转成number就会转成numer类型

1.1.3 trim属性：去文本域输入的前后空格

1.2v-model绑定单选checkbox

一 v-model表单元素

v-model其实我自己就是单纯的把他理解成双向绑定指令。

和v-bind一样都是操作数据，只是这个一般用在表单中。

1.1 v-model绑定文本域的value

     
    <input type="text" placeholder="请输入用户名" v-model.lazy="username" value="默认值"/>
    <h2>{{username}}</h2>
我们用v-model绑定username，当我们在文本框中输入值后，对应的username也会进行数据的双向绑定，从而展示在页面上，效果如下:

1.1.1 lazy属性：光标离开再发请求

如上面所示，给v-model加上lazy属性，可以实现光标离开后再执行。

1.1.2 number属性：如果能转成number就会转成numer类型

    <input type="text" name="age" v-model.number="age">
    <button @click="change()">获取age类型</button>
    <h2>age的类型:{{type}}</h2>
正常来说，type=“text”的文本域就算输入的数字，也是string类型，而是由这个.number属性，就可以把数字转成number类型，方便进行运算需求。

1.1.3 trim属性：去文本域输入的前后空格
    
    <input type="text" v-model.trim="username">

1.2v-model绑定单选checkbox

实现代码如下：
 
    <input type="radio" name ="sex" v-model="sex" value="男">男
    <input type="radio" name ="sex" v-model="sex" value="女">女
    <h2>{{sex}}</h2>
具体逻辑如下：

效果展示：

1.3代码展示

完整代码以及注释如下:

<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.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- v-model绑定文本域的value ,如果有value会覆盖掉value属性-->
     <!-- lazy属性：光标离开再发请求 -->
    <input type="text" placeholder="请输入用户名" v-model.lazy="username" value="默认值"/>
    <h2>{{username}}</h2>

    <!-- number属性：如果能转成number就会转成numer类型，比如文本域中输入数字原本时string，但是加上这个属性就会转成number -->
    <input type="text" name="age" v-model.number="age">
    <button @click="change()">获取age类型</button>
    <h2>age的类型:{{type}}</h2>

    <!-- trim属性：去文本域输入的前后空格 -->
    <input type="text" v-model.trim="username">

    <!-- v-model绑定单选checkbox -->
    <input type="radio" name ="sex" v-model="sex" value="男">男
    <input type="radio" name ="sex" v-model="sex" value="女">女
    <h2>{{sex}}</h2>

    <!-- v-mode绑定下拉框 -->
    <select name="city" v-model="city">
        <option value="cs">长沙</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
    </select>
    <h2>{{city}}</h2>
  </div>
  
  <script type="text/javascript" src="../vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          username:""  , 
          sex:"女" , 
          city:"sh",
          age:18,
          type:""
        }
      },
      methods:{
        change(){
            this.type = typeof this.age
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

效果图如下:

二 v-for循环指令

一般用在表格展示数据的时候。

直接展示表格循环获取数据的代码：

还有可以直接获得数组的下标index：

完整代码展示:

<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.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h2>列表展示</h2>
    <ul>
        <!-- 从数组arr中取出值name -->
        <li v-for = "name in arr">{{name}}</li>
    </ul>

    <ul>
        <!-- 从数组arr中取出值name和对应的小标index -->
        <li v-for = "(name,index) in arr">{{index}}--{{name}}</li>
    </ul>


    <h2>学生信息展示</h2>
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <!-- 遍历对象数组 -->
        <tr v-for = "stu in student"> 
            <th>{{stu.id}}</th>
            <th>{{stu.name}}</th>
            <th>{{stu.age}}</th>
        </tr>
    </table>

    <h2>嵌套For循环</h2>
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>女朋友</th>
        </tr>
        <!-- 遍历对象数组 -->
        <tr v-for = "stu in student"> 
            <th>{{stu.id}}</th>
            <th>{{stu.name}}</th>
            <th>{{stu.age}}</th>
        </tr>
    </table>
  </div>
  
  <script type="text/javascript" src="../vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {

          arr:["张三"  , "李四"  , "王五"]   , 
          student:[
            {id:1,
                name:"张三",
                age:13,
                girfriends:[
                    {
                    name:"小美",
                    age:12
                    },
                    {
                        name:"小芳",
                        age:11
                    }
                ]
            },

            {
                id:2,
                name:"李四",
                age:15,
                girfriends:[
                    {
                        name:"小王",
                        age:99
                    },
                    {
                        name : "小玉",
                        age:23
                    }
                ]
            }

          ]
        }
      },
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

效果展示：

三计算属性

说的明白一点，就是用来监听数据的。

这个函数里面有一个get函数，当需要获得get函数里面的属性的时候，就会自动调用这个get函数从而获取数据。

<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.0">
  <title>Document</title>
</head>
<body>
    <style>
        input{
            width: 50px;
        }
    </style>

  <div id="app">
    <input type="number" v-model="number1" >
    +
    <input type="number" v-model="number2" >
    =
    {{sum}}

    <br>
    <input type="number" v-model="number3" @mouseout="sum">
    +
    <input type="number" v-model="number4" @mouseout="sum">
    =
    {{sum}}

  </div>
  
  <script type="text/javascript" src="../vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        
        return {
          number1:0,
          number2:0,
          result:0
        }
      },
      methods:{
        // sum(){
        //     this.result = this.number1+this.number2
        // }
      },
      methods:{
                sum:function(){
                    return parseInt(this.number1) + parseInt(this.number2);
                }
            },
    
            // 计算属性
     computed:{
         sum:{
             get(){  
                        //get方法, 当有人读取计算属性时,该计算属性的get()函数就会执行
                   return parseInt(this.number1) + parseInt(this.number2); //此时的this就是vm
               }
           }
       }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</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.0">
  <title>Document</title>
</head>
<body>

   

  <div id="app">
    <table border="1" >
        <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="(book ,  index) in arr">
            <th>{{index+1}}</th>
            <th>{{book.name}}</th>
            <th>{{book.day}}</th>
            <th>{{book.price}}</th>
            <th><button @click="subNumber(book.id) ">-</button>{{book.number}}<button @click="addNumber(book.id)">+</button></th>
            <th><button @click="del(index)">移除</button></th>
        </tr>
    </table>
    <h2>总价：{{sum()}}</h2>
  </div>
  
  <script type="text/javascript" src="../../vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
           total:0,
           nnumber:1,
          arr:[
            {
                id:1,
                name:"挪威的森林",
                day:"2024.10.23",
                price:102,
                number:1,
            },
            {
                id:2,
                name:"活着",
                day:"2024.10.11",
                price:66,
                number:1,
            }
          ]
        }
      },
      methods:{
        sum(){
            if(this.total===0){
                this.arr.forEach(element => {
                this.total+=(element.price*element.number)
               });
            }else{
                return this.total
            }    
           
        },

        //    updateCount() {  
        //      alert(88)
        //     }  ,
  


        del(id){
            this.arr.splice(id,1)
        },
        subNumber(id){
            this.total+=10
           this.arr.forEach(element => {
            if(element.id===id){
                if(element.number>0){
                    this.nnumber--
                    element.number--;
                }
                
            }
           });
        },
        addNumber(id){
            this.arr.forEach(element => {
            if(element.id===id){
                this.nnumber++
                element.number++
            }
           });
        }
      },
       

      // 使用onMounted来在页面加载完成后调用updateCount  
// onMounted:(() => {  
//   updateCount();  
// }),

    watch: {  
    arr: {  
      handler(newValue, oldValue) {  

            this.total=0
            this.arr.forEach(element => {
                this.total += (element.number*element.price)
            }); 
      },  
      deep: true // 开启深度侦听  
    }  
  }, 

    
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

逻辑如下：

凌晨去看海

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue基础--v-model/v-for/事件属性/侦听器

正常来说，type=“text”的文本域就算输入的数字，也是string类型，而是由这个.number属性，就可以把数字转成number类型，方便进行运算需求。这个函数里面有一个get函数，当需要获得get函数里面的属性的时候，就会自动调用这个get函数从而获取数据。不过侦听器监听的数据是你自己设置的，设置完成后，当你设置的那个数据一旦发生变化，就会调用侦听器的函数，实现数据的重新计算等。如上面所示，给v-model加上lazy属性，可以实现光标离开后再执行。说的明白一点，就是用来监听数据的。
复制链接

扫一扫