使用v-mode双向数据绑定实现建议计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是计算器</title>
<script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<div class="box">
<h1>使用v-mode双向数据绑定实现建议计算器</h1>
<input type="text" v-model="num1" />
<select v-model="opr">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<label><input type="text" v-model="num2" /></label>
<button @click="calc()">=</button>
<label>结果:<span style="color: deeppink" v-text="result"></span> </label>
</div>
<script type="text/javascript">
var vm = new Vue({
el:".box",
data:{
num1:0,
num2:1,
opr:'+',
result:0
},
methods:{
calc(){
switch (this.opr) {
case "+":
this.result=parseInt(this.num1)+parseInt(this.num2);
break;
case "-":
this.result = parseInt(this.num1)-parseInt(this.num2);
break;
case "*":
this.result = parseInt(this.num1)*parseInt(this.num2);
break;
case "/":
this.result = parseInt(this.num1)/parseInt(this.num2);
break;
}
this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)");
}
}
});
</script>
</body>
</html>
效果:
使用Vue给元素绑定样式属性
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>使用Vue给元素绑定样式属性</title>
<script src="../lib/vue.js" type="text/javascript"></script>
<style type="text/css">
.color{
color: deeppink;
}
.fontSize{
font-size: 30px;
}
.space{
letter-spacing: 0.5em;
}
.style{
font-style: italic;
}
.active{
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<h1 v-bind:style="{color:'red','font-size':'20px'}">·不一样的我想你·</h1>
<h1 v-bind:style="innerStyle01">·不一样的我想你·</h1>
<h1 v-bind:style="[innerStyle01,innerStyle02]">·不一样的我想你·</h1>
<hr/>
<h1 :class="'color'">·不一样的我想你·</h1>
<h1 :class='"color"'>·不一样的我想你·</h1>
<h1 :class="['color','fontSize']">·不一样的我想你·</h1>
<h1 :class="['color','fontSize',false?'active':'']">·不一样的我想你·</h1>
<h1 :class="['color','fontSize',5>3?'active':'']">·不一样的我想你·</h1>
<h1 :class="['color','fontSize',flag===false?'active':'']">·不一样的我想你·</h1>
<h1 :class="['color','fontSize',{active:false}]">·不一样的我想你·</h1>
<h1 :class="{color:true,fontSize:false,space:true,style:true,active:false}">·不一样的我想你·</h1>
<h1 :class="[classInBox01,classInBox02]">·不一样的我想你·</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
innerStyle01:{color:'red','font-size':'20px'},
innerStyle02:{"letter-spacing":"1em"},
flag:true,
classInBox01:{color:true,fontSize:false},
classInBox02:{space:true,style:true,active:false}
}
});
</script>
</body>
</html>
运行结果:
v-for指令
1.使用v-for指令遍历简单数组
{{name}}
2.使用v-for指令遍历对象数组
id:{{user.id}}—name:{{user.name}}
3.使用v-for指令遍历对象属性值
{{key+’–’+value}}
4.使用v-for指令遍历数字(作用就是标准的for循环次数遍历)
【注意】
1.遍历得到的值可以使用【插值表达式、v-text、v-html】显示
2.不管遍历何种数据类型,都可以得到值和索引
3.遍历对象属性和值时可以得到【值、属性名字、索引】
4.值的赋值顺序是:值、【键名】、索引
5.一次遍历中,多个结果之间使用,分割即可对应赋值(value,key,index)
6.遍历过程中接受值的变量名字可以任意
7.遍历数字时数字是从1开始,不能是负数(因为该功能是固定次数遍历)
8.在组件中使用数据时,一定要用key唯一绑定数据(保证对UI组件的操作不会因为其它组件的变化而发生变化)
注意:
1.key必须是基本数据类型(string/number)
报错:Avoid using non-primitive value as key, use string/number value instead.
2.key的数据值一定不要重复
报错:Duplicate keys detected: ‘3’. This may cause an update error.
技巧:一般使用对象中的值唯一属性(主键)作为key,比如id
语法:
【知识点】
1.如果组件的属性的值是一个变量,则必须使用v-bind:或者:进行属性值的绑定
2.数组的push()方法用于向数组末尾加入元素,数组的unshift()方法用于向数组最前面加入元素
this.users.push({id:this.id,name:this.name,age:this.age});
this.users.unshift({id:this.id,name:this.name,age:this.age});
3.在遍历对象数组并结合组件(表单元素)一起使用时,一定要指定唯一的key属性,进行组件和数据
的唯一关联,避免被其它操作(指非本元素)影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的for指令</title>
<script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<h1>Vue中的for指令</h1>
<p v-for="name in names">{{name}}</p>
<hr/>
<p v-for="name,index in names" v-text="name+'---'+index"></p>
<hr/>
<p v-for="user in users" v-text="user"></p>
<hr/>
<p v-for="user in users">id:{{user.id}}---name:{{user.name}}---age:{{user.age}}</p>
<hr/>
<p v-for="num in 12" v-text="num"></p>
<hr/>
<p v-for="num,index in 12" v-text="num+'---'+index"></p>
<h1>Vue中的for指令实现数据绑定</h1>
<label>id:<input type="text" v-model="id"/></label>
<label>name:<input type="text" v-model="name"/></label>
<label>age:<input type="text" v-model="age"/></label>
<label><button @click="add()">添加人员信息</button></label>
<p v-for="user in users" :key="user.id">
<label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label>
</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
names:["006","007","008","009","010","011","012","013","014"],
users:[
{id:1,name:"吾",age:32},
{id:2,name:"名",age:33},
{id:3,name:"超",age:35}
],
id:'',
name:'',
age:''
},
methods:{
add(){
//this.users.push({id:this.id,name:this.name,age:this.age});
this.users.unshift({id:this.id,name:this.name,age:this.age});
}
}
});
</script>
</body>
</html>
结果: