标签:el 第三篇 Vuejs app num let message total
我的第三篇Vuejs
一、购物车案例
能够增加购物车中商品的数量和移除商品
1.1关键代码截图
1.2关于for循环
1.2.1 普通的for循环
let total=0;
for(let i=0;i<this.books.length;i++){
total+=this.books[i].price*this.books[i].num;
}
return total;
1.2.2 for(let i in this.books)
let total=0;
for(let i in this.books){
const book=this.books[i];
total+=book.price*book.num;
}
return total;
1.2.3 for(let item of this.books)
let total=0;
for(let item of this.books){
total+=item.price*item.num;
}
return total;
1.2.4 高阶函数
return this.books.reduce(function(preValue,book){
return preValue+book.price*book.num;
},0)
二、高阶函数
2.1 普通做法
const num=[10,20,30,100,200,40]
//1.取出所有小于100的数字
let newNumber1=[];
for(let i of num){
if(i<100){
newNumber1.push(i);
}
}
//2.将所有小于100的数字进行转化,全部乘以2
let newNumber2=[];
for(let i of newNumber1){
newNumber2.push(i*2);
}
//3.将第二步的数据进行累加
let total;
for(let i of newNumber2){
total+=i
}
2.2 高阶函数做法
//1.filter函数,返回一个Boolean值
//true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中
//false:当返回false时,函数内部会过滤掉这次的n
let newNumber1=num.filter(function(n){
return n<100;
})
//2.map函数
let newNumber2=newNumber1.map(function(n){
return n*2;
})
//3.reduce函数,有两个参数,第一个参数为函数,第二个参数为初始值
newNumber2.reduce(function(preValue,n){
return preValue+n;
},0)
2.3 高阶函数简写
let total=num.filter(function(n){
return n<100;
}).map(function(n){
return n*2;
}).reduce(function(preValue,n){
return preValue+n;
},0)
let total=num.filter(n => n<100).map(n => n*2).reduce((preValue,n) => preValue+n )
三、v-model
3.1 原理
v-model实现表单元素和数据的双向绑定
当我们在输入框输入内容时,因为input中的v-model绑定了message,所以会实时的将输入的内容传递给message,message发生改变
当message发生改变时,因为上面我么使用Mustache语法,将message的值插入DOM中,所以DOM会发生响应的改变,所以v-model能实现双向绑定
它的本质上包含两个操作:
v-bind绑定一个Value属性
v-on指令给当前元素绑定input事件
<div id="app">
<input type="text" v-model="message" name="" id="">
<input type="text" :value="message" @input="message = $event.target.value" name="" id="">
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"hello"
}
})
</script>
3.2 v-model结合input
3.2.1 text
<div id="app">
<!--v-model结合text,实时获得text中输入的数据-->
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"hello"
}
})
</script>
3.2.2 radio
<div id="app">
<!--v-model结合radio,获取用户选中的选项的value-->
<label for="male">
<input type="radio" name="sex" id="male" v-model="sex" value="男">男
</label>
<label for="female">
<input type="radio" name="sex" id="female" v-model="sex" value="女">女
</label>
<h2>您的性别为:{{sex}}</h2>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
sex:'男',
}
})
</script>
3.2.3 checkbox
<div id="app">
<!--v-model结合checkbox,获取用户选中的选项的value-->
<label for="agree">
<input type="checkbox" value="同意协议" id="agree" v-model="isagree">同意协议
</label>
<!--需选中之后,才能点击按钮-->
<button :disabled="!isagree">下一步</button>
<h2>您的选择是:{{isagree}}</h2>
<input type="checkbox" value="篮球" v-model="hobbies" >篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<h2>您的兴趣是:{{hobbies}}</h2>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
isagree:false,//单个选项
hobbies:[]//多个选项
}
})
</script>
3.2.4 select
<div id="app">
<!--v-model结合select,获取用户选中的选项的value,只能选中一个,类似于单选框-->
<select v-model="fruit">
<option value="苹果">苹果</option>
<option value="栗子">栗子</option>
<option value="榴莲">榴莲</option>
<option value="香蕉">香蕉</option>
</select>
<h2>您喜欢的水果为:{{fruit}}</h2>
<!--v-model结合select,获取用户选中的选项的value,能选中多个,类似于多选框-->
<select v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="栗子">栗子</option>
<option value="榴莲">榴莲</option>
<option value="香蕉">香蕉</option>
</select>
<h2>您喜欢的水果们为:{{fruits}}</h2>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
fruit:"香蕉",//单个选项
fruits:[],//多个选项
}
})
</script>
3.3 值绑定
<div id="app">
<!--值绑定-->
<!--当我们不想把数据写死的时候,可以通过值绑定来渲染动态的数据-->
<label v-for="item in movies" :for="item">
<input type="checkbox" name="" id="item" :value="item" v-model="movie">{{item}}
<br>
</label>
<h2>您喜欢的电影:{{movie}}</h2>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
movies:["何以为家","釜山行","蜘蛛侠"],
movie:[],
}
})
</script>
3.4 v-model修饰符
<div id="app">
<!--v-mode修饰符-->
<!--1.v-model.lazy-->
<!--当失去焦距或者监听到回车事件时,才发生响应-->
<input type="text" v-model.lazy="message">
{{message}}
<!--2.v-model.number-->
<!--无论我们输入的是字符串还是数值,都会被当成字符串处理,
但是加上了number修饰符,就可以获取到整型数值,不需要取得数据之后再进行转换-->
<input type="text" v-model.number="age">
{{age}}+{{typeof age}}
<!--3.v-model.trim-->
<!--当输入的内容首尾有多个空格时,trim修饰符可以过滤内容左右两边的空格-->
<input type="text" v-model.trim="message">
{{message}}
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:" hello ",
age:0
}
})
</script>
标签:el,第三篇,Vuejs,app,num,let,message,total 来源: https://www.cnblogs.com/hyj-/p/13687088.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。