双向绑定:不同表单元素使用v-model的原理有差异
单选按钮
单选按钮的特点
<input type="radio" value="1" name="sex">男
<input type="radio" value="0" name="sex">女
a. 单选按钮的value是写死的！等待用户来选择的！
b. 当用户选择单选按钮时，改变的不是value属性，而是checked属性状态。
如何使用单选框:
<input type="radio" v-model="变量名" value="1" name="sex">男
<input type="radio" v-model="变量名" value="0" name="sex">女
单选框原理:
a. 当首次加载时，new Vue()先获得变量的值，然后用变量的值与radio的value值做比较。哪个radio的value值与变量值相同！哪个radio就被自动选中！其余value值与变量值不相同的radio，就不会被选中。
b. 当用户切换选中项时，v-model会自动把新选中的radio的value值，自动传回程序中的变量中保存。
案例
<!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.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 单选框 -->
<div id="app">
<input type="radio" v-model="sex" name="sex" value="1">男
<input type="radio" v-model="sex" name="sex" value="0">女
<h3>您选择的性别是 ：{{sex}}</h3>
</div>
<script>
new Vue({
el:'#app',
data:{
sex:1//默认是男
}
});
</script>
</body>
</html>
下拉框
select元素的特征:
<select value="3">
<option value="1">文本1</option>
<option value="2">文本2</option>
<option value="3">文本3</option>
</select>
a. value值是写死在select下每个option上的！等待用户来选择的！
b. 当用户选择切换选择时，改变的不是option的value属性，该的是select的value。
DOM中规定，选中的option的value值，会自动成为select元素的value值。
c. 因为选择option，改的是整个select的value值，所以v-model应该放在select元素上
如何使用下拉框
```html
<select v-model="变量" value="3">
<option value="1">文本1</option>
<option value="2">文本2</option>
<option value="3">文本3</option>
</select>
```
原理
a. 首次加载时, v-model会用变量的初始值与每个option的value值做比较，哪个value值等于变量值，则哪个option被选中。其余value值与变量值不相等的option，不会被选中
b. 当用户切换选中项后，v-model会自动将当前选中项的value，也就是整个select的新value，自动更新回程序中的变量中保存。
案例
<!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.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.2.1 select元素由用户主动手动选择改变，所以应该用双向绑定v-model来自动获得用户新选择的值，并定义变量src保存新选择的图片路径值-->
请选择城市:
<select v-model="src">
<option value="imgs/bj.jpg">北京</option>
<option value="imgs/sh.jpg">上海</option>
<option value="imgs/hz.jpg">杭州</option>
</select>
<br>
<!-- 1.2.2 img元素的src属性会随程序自动变化，所以应该用单向绑定，又因为要改变的src是属性，所以用:绑定-->
<img width="300px" :src="src">
</div>
<script>
new Vue({
el:'#app',
data:{
src:'imgs/bj.jpg'
}
});
</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.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 第一个下拉框 选择省 -->
<select v-model="pi">
<option :value="i" v-for="prov,i of provs" :key="i">
{{prov}}
</option>
</select>
<!-- 第二个下拉框 选择市 -->
<select v-model="ci">
<option :value="i" v-for="city,i of cities[pi]" :key="i">
{{city.name}}
</option>
</select>
<h3>我来自于 {{provs[pi]}} {{cities[pi][ci].name}}</h3>
</div>
<script>
new Vue({
el: '#app',
data: {
pi:'0',//标记选中省份的下标
ci:'0',//标记选中的城市在子数组内的下标
provs: ["北京", "上海", "河北"],
cities: [
[
{ "name": '东城区', "value": 101 },
{ "name": '西城区', "value": 102 },
{ "name": '海淀区', "value": 103 },
{ "name": '朝阳区', "value": 104 }
],
[
{ "name": '闵行区', "value": 201 },
{ "name": '浦东区', "value": 202 },
{ "name": '普陀区', "value": 303 }
],
[
{ "name": '张家口市', "value": 301 },
{ "name": '廊坊市', "value": 302 },
{ "name": '保定市', "value": 303 },
{ "name": '唐山市', "value": 304 },
{ "name": '秦皇岛市', "value": 305 }
]
]
},
watch:{
pi(){
this.ci=0;//标记选中省份的下标发生变化时，讲对应的市的下标设置为0
}
}
});
</script>
</body>
</html>
复选框
复选框单用:
<input type="checkbox">同意
a. 用户选中与不选中复选框，修改的不是value值，而是checked属性状态。
如何使用复选框
<input type="checkbox" v-model="变量">
强调
变量的值最好是bool类型
原理
a. 首次加载时，v-model会判断变量的中为true还是false。如果变量值为true，则当前checkbox选中，否则如果变量值为false，则当前checkbox不选中
b. 当用户切换checkbox的选中状态后，v-model会将新的选中状态(checked属性值)自动更新回程序中的变量中保存。
案例
<!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.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--VUE 3步
1. 做界面
1.1 唯一父元素
1.2 找可能发生变化的位置:
1.2.1 checkbox的选中状态会被用户主动改变，所以，应该用双向绑定，并定义变量isAgree表示是否同意
1.2.2 其余3个表单元素的disabled属性会随程序而自动变化。所以，应该用单向绑定。而且，因为其余三个表单元素的disabled状态，直接和checkbox的选中状态，也就是isAgree变量的值有关。
规则: checkbox选中, isAgree=true，表示用户同意
其余表单元素的disabled应该=false，表示启用checkbox未选中，isAgree=false，表示用不同意
其余表单元素的disabled应该=true，表示禁用
总结: 其余三个表单的disabled属性值与isAgree的变量值刚好相反！-->
<div id="app">
用户名：<input type="text" :disabled="!isAgree">
<br>
密码：<input type="password" :disabled="!isAgree">
<br>
<input type="checkbox" v-model="isAgree">同意
<br>
<input type="button" :disabled="!isAgree" value="注册">
</div>
<script>
new Vue({
el:'#app',
data:{
isAgree:false//默认是不可以点击注册的
}
});
</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.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="favObj,i of favs" :key="i" >
<!-- 绑定的是选中的状态 -->
{{favObj.fname}} <input type="checkbox" v-model="favObj.checked">
</li>
</ul>
<hr>
我选择的爱好有
<ul>
<li v-for="favObj,i of favs" :key="i" v-show="favObj.checked==true">
{{favObj.fname}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
favs: [
{ fname: "跑步", checked: false },
{ fname: "足球", checked: false },
{ fname: "游泳", checked: false },
{ fname: "篮球", checked: false }
]
}
});
</script>
</body>
</html>
运行结果
绑定样式
绑定内联样式Style
何时绑定内联样式
如果只修改个别css属性值时，优先修改内联样式
不好的解决1
a. 将style属性看成一个普通的字符串属性来绑定
b. 如何:
<元素 :style="变量">
data:{
变量: "css属性1: 值1; css属性2:值2"
}
c. 问题: 多个css属性值都挤在一个字符串中，极其不便于修改某一个css属性值
不好的解决2
a. 将style属性值看做一个匿名对象语法来绑定:
b. 如何：
| JS地盘 JS对象语法 对象的属性:属性值 |
<元素 :style="{ css属性值: 变量1, css属性值2: 变量2 }"
//如果css属性名字刚好与变量名字相同，可只写一个名字
<元素 :style="{ css属性值, css属性值2 }"
既当css属性名 又当变量名
data:{
变量1: 值1,
变量2: 值2
}
c. 强调: 长度、大小、位置、距离相关的属性，必须带单位！
d. 原理:
1). new Vue()将data中的变量中保存的css属性值，更新到界面中对象语法内
2). 将对象语法编译为内联样式字符串，赋值给元素的style属性
e. 好处: 2个
1). 可以使用ES6的对象属性名变量名简写
2). 可以独立修改某一个css属性
f. 示例: 修改飞机的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js">
</script>
</head>
<body>
<div id="app">
<!--不好做法1-->
<!-- <img style="position:fixed;" :style="imgStyle" src="imgs/p3.png" > -->
<!--不好做法2-->
<!-- <img style="position:fixed;" :style="{ left: left, top:top }" src="imgs/p3.png" > -->
<img src="imgs/p3.png" style="position: fixed;" :style="{left,top}">
</div>
<script>
var vim = new Vue({
el: '#app',
data: {
//不好做法1:
// imgStyle:`left:200px; top:100px;`
//不好做法2:
left: "200px",
top: "100px"
}//通过vim.top="200px"控制飞机的位置
});
</script>
</body>
</html>
g. 缺点: 如果多个元素都需要修改内联样式，则变量会很多，变量名极容易发生冲突！
好的解决:
a. 用有名称的对象来绑定，就是给style起一个名字，通过这个名字来控制
b. 如何:
<元素1 :style="变量名1"> <元素2 :style="变量名2">
//"css属性:值; css属性:值"
data:{
变量名1:{
css属性: 值,
css属性: 值
}, //通过变量名字来绑定，可以避免多个元素属性名冲突的问题
变量名2:{
css属性: 值,
css属性: 值
}
}
c. 原理:
1). new Vue()先将对象翻译为内联样式字符串:
"css属性:值; css属性:值;..."
2). 然后再将内联样式字符串替换到元素上style位置
d. 好处: 极大的减少了变量的个数，且避免了属性名与属性名之间命名冲突！
不带:的style和带:的style可以并存
a. 结果: new Vue()先编译带:的style为内联样式字符串，再和不带:的style字符串拼接形成最后完整的style字符串
b. 今后，可能随程序动态变化的css属性，都放在带:的style中
c. 今后，固定不变的css属性，都放在不带:的style中
示例:
使用有名称的对象绑定飞机位置，并用键盘操作飞机位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js">
</script>
</head>
<body>
<div id="app">
<img src="imgs/p3.png" style="position: fixed;" :style="imgStyle1">
<img src="imgs/p5.png" style="position: fixed;" :style="imgStyle2">
</div>
<script>
var vim = new Vue({
el: '#app',
data: {
imgStyle1:{
left: "200px",
top: "100px"
} ,
imgStyle2:{
left: "500px",
top: "100px"
} ,
}
});
window.notallow=function(e){
// console.log(e.keyCode)
if(e.keyCode==37){
var left = parseInt(vim.imgStyle1.left);
left-=20;
vim.imgStyle1.left=`${left}px`;
}else if(e.keyCode==39){
var left = parseInt(vim.imgStyle1.left);
left+=20;
vim.imgStyle1.left=`${left}px`;
}
else if(e.keyCode==38){
var top = parseInt(vim.imgStyle1.top);
top-=20;
vim.imgStyle1.top=`${top}px`;
}else if(e.keyCode==40){
var top = parseInt(vim.imgStyle1.top);
top+=20;
vim.imgStyle1.top=`${top}px`;
}
if(e.keyCode==65){
var left = parseInt(vim.imgStyle2.left);
left-=20;
vim.imgStyle2.left=`${left}px`;
}else if(e.keyCode==68){
var left = parseInt(vim.imgStyle2.left);
left+=20;
vim.imgStyle2.left=`${left}px`;
}
else if(e.keyCode==87){
var top = parseInt(vim.imgStyle2.top);
top-=20;
vim.imgStyle2.top=`${top}px`;
}else if(e.keyCode==83){
var top = parseInt(vim.imgStyle2.top);
top+=20;
vim.imgStyle2.top=`${top}px`;
}
}
</script>
</body>
</html>
绑定class样式
何时绑定class样式
如果批量修改一个元素的多个css属性值时，就绑定class
不好的绑定1
a. 将class属性看做一个普通的字符串属性来绑定
b. 如何:
<元素 :class="变量名">
data:{ 变量名:"class1 class2 ... " }
c. 问题: 极其不便于只修改其中某一个class
不好的绑定2
a. 使用匿名的对象来绑定class属性:
b. 如何:
<元素 :class="{ class名1:变量1 , class名2: 变量2 }">
data:{
变量1: true或false, //开关
变量2: true或false //开关
}
c. 原理: new Vue()在扫描class时，会先识别变量值。
1). 如果变量值为true，则该class就会出现在最终元素的class属性中
2). 如果变量值为false，则该class不会出现在最终元素的class属性中
d. 示例: 只验证手机号格式是否正确:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js">
</script>
<style>
.success {
background-color: lightGreen;
color: green;
border: green 1px solid;
}
.fail {
background-color: pink;
color: red;
border: red 1px solid;
}
</style>
</head>
<body>
<div id="app">
<!-- autofocus 可以自动显示光标 -->
手机号：<input type="text" v-model="phone" autofocus>
<span :class="{success,fail}">{{msg}}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
phone: "",
success: false,
fail: false,
msg: ""
},
watch: {
phone() {
//1. 定义正则表达式描述手机号的规则
var reg = /^1[3-9]\d{9}$/;
//2. 用正则表达式验证phone变量的值
var result = reg.test(this.phone);
//3. 如果验证通过
if (result == true) {
//3.1 先修改msg的提示信息为格式正确
this.msg = "手机号格式正确"
//3.2 再修改success和fail的变量值，控制启用success样式类，禁用fail样式类
this.success = true;
this.fail = false;
} else {//4. 否则如果验证不通过
//4.1 先修改msg的提示信息为格式不正确
this.msg = "手机号格式不正确"
//4.2 再修改success和fail的变量值，控制禁用success的样式类，启用fail样式类
this.success = false;
this.fail = true;
}
}
}
});
</script>
</body>
</html>
e. 问题: 如果多个元素都需要控制样式，则变量名就会很多，极容易造成冲突！
好的绑定:
a. 用有名称的对象来绑定
b. 如何:
<元素1 :class="变量1">
<元素2 :class="变量2">
data:{
变量1:{
class1: true或false,
class2: true或false
},
变量2:{
class1: true或false,
class2: true或false
},
}
c. 原理:
1). new Vue()先扫描变量中的对象中的class名后的bool值，将对象格式翻译为class字符串。
a. 哪个class名对应的值为true，则该class会出现在最终的class字符串中
b. 哪个class名对应的值为false，则该class不会出现在最终的class字符串中
2). 最后，将翻译后的class字符串，替换:class的位置
d. 优点: 即使多个元素都要动态绑定相同的class名，也不会冲突
e. 示例: 验证手机号和密码的格式是否正确:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js">
</script>
<style>
.success {
background-color: lightGreen;
color: green;
border: green 1px solid;
}
.fail {
background-color: pink;
color: red;
border: red 1px solid;
}
</style>
</head>
<body>
<div id="app">
<!-- autofocus 可以自动显示光标 -->
手机：<input type="text" v-model="phone" autofocus>
<span :class="phone_class">{{phone_msg}}</span><br />
密码：<input type="password" v-model="pwd" >
<span :class="pwd_class">{{pwd_msg}}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
phone: "",
pwd: "",
pwd_msg: "",
phone_msg: "",
phone_class: {
success: false,
fail: false,
},
pwd_class: {
success: false,
fail: false,
}
},
watch: {
phone() {
//1. 定义正则表达式描述手机号的规则
var reg = /^1[3-9]\d{9}$/;
//2. 用正则表达式验证phone变量的值
var result = reg.test(this.phone);
//3. 如果验证通过
if (result == true) {
//3.1 先修改msg的提示信息为格式正确
this.phone_msg = "手机号格式正确"
//3.2 再修改success和fail的变量值，控制启用success样式类，禁用fail样式类
this.phone_class.success = true;
this.phone_class.fail = false;
} else {//4. 否则如果验证不通过
//4.1 先修改msg的提示信息为格式不正确
this.phone_msg = "手机号格式不正确"
//4.2 再修改success和fail的变量值，控制禁用success的样式类，启用fail样式类
this.phone_class.success = false;
this.phone_class.fail = true;
}
},
pwd() {
//1. 定义正则表达式描述,密码的规则
var reg = /^\d{6}$/;
//2. 用正则表达式验证pwd变量的值
var result = reg.test(this.pwd);
//3. 如果验证通过
if (result == true) {
//3.1 先修改msg的提示信息为格式正确
this.pwd_msg = "密码格式正确"
//3.2 再修改success和fail的变量值，控制启用success样式类，禁用fail样式类
this.pwd_class.success = true;
this.pwd_class.fail = false;
} else {//4. 否则如果验证不通过
//4.1 先修改msg的提示信息为格式不正确
this.pwd_msg = "密码格式不正确"
//4.2 再修改success和fail的变量值，控制禁用success的样式类，启用fail样式类
this.pwd_class.success = false;
this.pwd_class.fail = true;
}
}
}
});
</script>
</body>
</html>
注意
其实: 不带:的class和带:的class可以并存
a. 固定不变的class，可以放在不带:的class属性中
b. 动态改变的class，可以放在带:的class属性中
c. 最后编译时，两部分class是合并后，共同发挥作用的。
自定义指令
问题
如果在new Vue()之前为DOM元素执行一些初始化操作时，会被后续的new Vue()清除掉！无法发挥作用！比如: 自动获得焦点.
解决
今后，只要想在页面加载时，就为元素自动执行一些初始化的设置操作时，都要用自定义指令！
如何: 2步
(1). 先创建自定义指令:
//先创建一个指令对象
//再将指令对象加入到内存中Vue类型中保存起来备用
Vue.directive("指令名",{
//回调函数: 当new Vue()扫描到带有这个指令的元素时自动执行
//同时，会将当前带有这个指令的DOM元素自动传给回调函数第一个形参变量——信任！
inserted( 当前DOM元素 ){
//对当前DOM元素执行原生的DOM操作
}
})
(2). 使用指令: 指令其实就是一个自定义的HTML属性而已
<元素 v-指令名>
原理:
当new Vue()扫描到一个带有自定义指令的元素时，会回到内存中Vue类型中查找是否有同名的指令。一旦找到同名的指令，就会自动调用指令对象中的inserted函数，并自动将当前DOM元素对象传给inserted函数的第一个形参！在inserted函数内，对当前DOM元素执行原生的DOM初始化操作。
好处:
不会被new Vue()冲掉！可以保留下来！
强调:
a. 定义指令对象时，指令名一定不要带v-前缀。但是，在html中使用该指令时，又必须加v-前缀！
b. 如果指令名中包含多个英文单词，必须用-来分隔多个单词，所有字母必须小写！
原因: 因为HTML语言很蠢！HTML无法区分大写字母和小写字母！所以，在HTML中使用的标签名、属性名，就不应该使用任何形式的大写字母，一律都要用小写字母！
案例
让文本框在开局时自动获得焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js">
</script>
</head>
<body>
<div id="app">
<!--希望在页面加载时，input文本框自动获得焦点-->
<input type="text" id="myId" v-my-focus ><button>搜索</button>
</div>
<script>
//使用原生DOM操作,和Vue冲突，在不newVUe的时候可以有效果
// var myId = document.getElementById("myId");
// myId.focus();//让当前表单元素自动获得焦点——减少用户的操作步骤，提高用户体验
Vue.directive("my-focus",{
inserted(input){
input.focus();
}
})
new Vue({
el:'#app'
});
</script>
</body>
</html>
运行结果
计算属性
问题
页面上有些值需要经过复杂的计算才能获得，而{{}}不支持循环、分支等复杂程序结构！
解决
今后，只要一个值需要经过复杂的计算才能获得时，都要用计算属性
什么是计算属性
不实际保存属性值，获取属性值时，都要经过其它属性值计算获得。
如何: 2步
(1). 在new Vue()中定义计算属性:
new Vue({
el:"#app",
data:{ ... },
methods:{ ... },
watch:{ ... },
computed:{ //专门保存所有计算属性的区域
//虽然称为"属性"，但是实际上是一个函数
属性名(){
复杂的计算过程 return 计算结果！
}
}
})
(2). 在界面中绑定语法中使用计算属性:
<元素>{{ 属性名 }}</元素>
//千万不要加()!
原理:
(1). new Vue()在绑定语法中如果发现"变量"，会先去data中找是否有同名变量。如果没找到，再进入computed()中找有没有同名的计算属性。
(2). 如果在computed中找到了同名的计算属性，就自动执行计算属性的计算过程。并将计算结果，返回到界面，代替计算属性名出现的位置。
计算属性与methods中函数的差别:
(1). methods中的函数，调用时必须加()，且调用几次，就会反复执行几次。methods的执行结果不会被缓存
(2). computed中的计算属性，使用时，不用加()，且无论使用多少次，只在第一次使用时计算一次。然后计算结果就被new Vue()缓存起来！之后每次使用时，不必重复计算，直接从缓存中取数据即可！
(3). 总结:
a. 今后如果一个函数，更侧重于执行一项操作任务，而不太关心返回的结果数据时，就用methods中的函数。
b. 今后如果更关心一个函数的计算结果时，并且可能反复使用计算结果时，都用计算属性computed。
案例
计算购物车总价:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>总价：{{total.toFixed(2)}}</h3>
<ul>
<li v-for="p,i of cart" :key="i">
{{p.pid}}--{{p.pname}}--{{p.price}}--{{p.count}}
</li>
</ul>
<h3>{{total.toFixed(2)}}</h3>
</div>
<script>
new Vue({
el:'#app',
data:{
cart:[
{pid:1,pname:"小米",price:2399,count:3},
{pid:2,pname:"华为",price:4999.99,count:5},
{pid:3,pname:"苹果",price:6999,count:2}
]
},
methods:{
},
computed:{
total(){
var result=0;
for(var p of this.cart){
var total =p.price*p.count;
result+=total;
}
return result;
}
}
});
</script>
</body>
</html>