今天学习内容
1.简易计算器
2.vue的方式通过class设置样式
3.vue的方式通过style设置样式
4.v-for三种使用方法
5.v-for中key的使用
6.v-if和v-show的使用对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.bg {
background-color: darkcyan;
}
.active {
color: darkred;
}
.size {
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<!--简易计算器-->
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="cal">
<input type="text" v-model="result">
<!--使用class设置样式的-->
<h4>使用class设置样式的</h4>
<!--方式一-->
<h5>方式一:数组</h5>
<p :class="['size','active']">哈哈哈哈哈哈哈</p>
<!--方式二-->
<h5>方式二:数组中使用3元表达式</h5>
<p :class="['size',flag?'active':'']">哈哈哈哈哈哈哈</p>
<!--方式三-->
<h5>方式三:数组中嵌套对象</h5>
<p :class="['active',{'size':false}]">哈哈哈哈哈哈哈</p>
<!--方式四-->
<h5>方式四:直接使用对象</h5>
<p :class="{'bg':true,'size':true,'active':true}">哈哈哈哈哈哈哈</p>
<!--使用style设置样式-->
<h4>使用style设置样式</h4>
<!--方式一-->
<h5>方式一:直接在元素上设置</h5>
<p :style="{'color':'red'}">哈哈哈哈哈哈哈</p>
<!--方式二-->
<h5>方式二:在data上设置</h5>
<p :style="classStyle">哈哈哈哈哈哈哈</p>
<!--方式三-->
<h5>方式三:在元素上使用数组设置</h5>
<p :style="[classStyle,{'font-size':'20px'}]">哈哈哈哈哈哈哈</p>
<!--方式四-->
<h5>方式四:数组中使用3元表达式</h5>
<p :style="[flag?classStyle:'',{'font-size':'20px'}]">哈哈哈哈哈哈哈</p>
<!--v-for四种使用方法-->
<h4>v-for三种使用方式</h4>
<!--方式一-->
<h5>方式一:迭代数字</h5>
<span v-for="count in 10">{{ count }},</span>
<!--方式二-->
<h5>方式二:迭代数组</h5>
<p v-for="(item,index) in list">{{ index }}-{{ item }}</p>
<!--方式三-->
<h5>方式三:迭代对象</h5>
<p v-for="(val,key,index) in obj">{{ index }}-{{ key }}:{{ val }}</p>
<!--v-for中key的使用-->
<h4>v-for中key的使用</h4>
<label for="">id:
<input type="text" v-model="id">
</label>
<label for="">name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
<!--如果不加key,checkbox记录的索引就不会根据已选框变化-->
<p v-for="item in obj2" :key="item.id">
<input type="checkbox">{{ item.id }} --- {{ item.name }}
</p>
<!--v-if和v-show的使用对比-->
<h4>v-if和v-show的使用对比</h4>
<input type="button" @click="toggle" value="触发">
<!--v-if 有较高的切换性能消耗,原因是直接删除增加dom-->
<!--v-show 有较高的渲染性能消耗,原因是添加删除display:none-->
<!--如果元素设计到频繁的切换, 最好不要使用v-if-->
<h3 v-if="toggled">这是用v-if控制的元素</h3>
<h3 v-show="toggled">这是v-show控制的元素</h3>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: false,
toggled: true,
classStyle: {
color: 'blue'
},
n1: 0,
opt: "+",
n2: 0,
result: 0,
list: ["jack", "ben", "jason", "james", "小明", "老桑"],
obj: {
name: "jack",
age: 10,
gender: "男",
hobby: "吃鸡"
},
id: "",
name: "",
obj2: [
{id: 1, name: "桑吉尔夫"},
{id: 2, name: "嘉米"},
{id: 3, name: "骨裂"},
{id: 4, name: "阿比盖尔"},
{id: 5, name: "杀意隆"}
]
},
methods: {
cal: function () {
switch (this.opt) {
case "+":
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case "-":
this.result = parseInt(this.n1) - parseInt(this.n2);
break;
case "*":
this.result = parseInt(this.n1) * parseInt(this.n2);
break;
case "/":
this.result = parseInt(this.n1) / parseInt(this.n2);
break;
}
},
add: function () {
this.obj2.unshift({id: this.id, name: this.name})
},
toggle: function () {
this.toggled = !this.toggled
}
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
