Vue练习案例

最新推荐文章于 2023-02-06 15:48:30 发布

coder_Alger

最新推荐文章于 2023-02-06 15:48:30 发布

阅读量305

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42289227/article/details/105318836

版权

这篇博客探讨了Vue.js中的表单绑定v-model的原理和基本使用，展示了如何通过v-model实现双向数据绑定。同时，文章介绍了JavaScript中的计算属性，详细阐述了三种不同的循环遍历方法，并讲解了高阶函数的应用，特别是`filter`函数在处理数组时的使用。最后，博客还讨论了如何利用`v-model`在用户信息提交场景下的应用。

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

案例代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户登录切换的小案例</title>
</head>
<body>
  <div id="app">
    <span v-if="isUser">
      <label for="username">用户账号</label>
      <input type="text" id="username" placeholder="用户账号">
    </span>
    <span v-else>
      <label for="email">用户邮箱</label>
      <input type="text" id="email" placeholder="用户邮箱">
    </span>
    <button @click="isUser = !isUser">切换类型</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',    //用于挂载要管理的元素
      data:{    //定义一些数据
        isUser: true
      }
    })
  </script>
</body>
</html>

计算属性中循环遍历的三种方法

computed: {
    totalPrice() {
      //方法1、普通的for循环
      // let totalPrice = 0
      // for(let i = 0 ; i < this.books.length; i++){
      //   totalPrice += this.books[i].price*this.books[i].count
      // }

      //2、for (let i in this.books) 此处的i即为索引值
      // let totalPrice = 0
      // for (let i in this.books) {
      //   const book = this.books[i]
      //   totalPrice += book.price*book.count
      // }

      //方法3、for(let i of this.books)  无需获取索引值直接调用
      let totalPrice = 0
      for(let item of this.books) {    //此时取出的item为对象
        totalPrice += item.count * item.price
      }
      return totalPrice
    }
  }

高阶函数

//编程范式：命令式编程/声明式编程
//编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）
//filter中的回调函数有一个要求：必须返回一个boolean：
//当返回true时，函数内部会自动将这次回调的n加入到新的数组中
//当返回false时，函数内部会过滤掉这次的n
const nums = [10,20,111,222,333,212,12,34]
//引入高阶函数
nums.filter(function (n) {
  return false
})


//需求1、取出所有小于100的数字
// let newNums = []
// for (let n of nums) {
//   if(n<100) {
//     newNums.push(n)
//   }
// }
//需求2、将所有小于100的数字进行转化：全部*2
// let new2Nums = []
// for (let n of newNums) {
//   if (n < 100) {
//     new2Nums.push(n*2)
//   }
}
//需求3、将所有的new2Nums数字相加，得到最终的结果
// let total = 0
// for (let n of new2Nums) {
//   total += n
// }
// return total

表单绑定v-model

表单控件在实际开发中是非常罕见的。特别是对于用户信息的提交，需要大量的表单

Vue中使用v-model指令来实现表单元素和数据的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model的基本使用</title>
</head>
<body>

  <div id="app">
    <input type="text" v-model="message">
    {{message}}
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',    //用于挂载要管理的元素
      data:{    //定义一些数据
        message:'你好，vue'
      }
    })
  </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model的原理</title>
</head>
<body>

  <div id="app">
    <!--方法1-->
    <!--<input type="text" v-model="message"><br/>-->
    <!--方法2-->
    <!--<input type="text" :value="message" v-on:input="valueChange">-->
    <!--方法3-->
    <input type="text" :value="message" @input="message = $event.target.value">
    <h2>{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',    //用于挂载要管理的元素
      data:{    //定义一些数据
        message:'你好，vue'
      },
      methods: {
        valueChange(event) {
          this.message = event.target.value
        }
      }
    })
  </script>

</body>
</html>

coder_Alger

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue练习案例

案例代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用户登录切换的小案例</title></head><body> <div id="app"> <span...
复制链接

扫一扫