案例代码展示
<!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>