1.属性绑定
1.1案例
a标签的属性绑定
- 需求: href中的属性动态赋值
- 语法: v-bind:href=“VUE中的属性”
其中简化方案:
```
百度
百度
class类型绑定
- class中可以定义多个样式,简化程序的调用
- 需求: 需要动态的为class赋值
- 规则:class是属性的绑定,绑定之后查找对应的属性
- colorClass:"blue"之后根据value值 blue查找对应的css样式
属性切换
- 需求:通过按钮控制样式是否展现属性
- 语法: :class={class类型的名称: false}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性绑定</title>
<style>
/* red 红色 宽度50 高度50 */
.red {
background-color: red;
width: 50px;
height: 50px;
}
.blue {
background-color: aqua;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
**<!-- a标签的属性绑定
需求: href中的属性动态赋值
语法: v-bind:href="VUE中的属性"
-->**
<a v-bind:href="url">百度</a>
<!-- 简化写法 -->
<a :href="url">百度</a>
<hr />
**<!-- 2.class类型绑定
class中可以定义多个样式.简化程序的调用
需求: 需要动态的为class赋值
规则: :class是属性的绑定,绑定之后查找对应的属性
colorClass: "blue" 之后根据value值 blue 查找对应的CSS样式**
-->
<div :class="colorClass">我是class修饰</div>
<hr >
<!-- 3. 属性切换
需求: 通过按钮控制样式是否展现 属性
语法: :class={class类型的名称: false}
-->
<div :class="{red: flag}">我是class修饰</div>
<button @click="flag = !flag">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
url: "http://www.baidu.com",
colorClass: "blue",
flag: true
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支结构</title>
</head>
<body>
<div id="app">
<!--
分支结构
1.v-if 如果为真则展现标签
2.v-else-if 必须与v-if连用
3.v-else 必须与v-if连用 取反
-->
<h3>评级</h3>
请输入成绩:<input v-model="score" type="number"/>
<div v-if="score >=90">优秀</div>
<div v-else-if="score >=80">良好</div>
<div v-else-if="score >=70">中等</div>\
<div v-else-if="score >=60">及格</div>
<div v-else>不及格</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 0
},
methods: {
}
})
</script>
</body>
</html>
2.2 语法
分支结构
1 .v-if 如果为真则展现标签
2. v-else-if 必须与v-if连用
3. v-else 必须与v-if连用 取反
3 循环结构
3.1 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支结构</title>
</head>
<body>
<div id="app">
<!--
1.什么时候使用循环
多次重复的执行同一操作
2.什么数据使用循环
1.数组
2.对象
3.数组套对象(集合)
--总结:
1.如果遍历数组 参数(value,inde)
2.如果遍历对象 参数(value,key,index)
特点:遍历数据在页面中展现
-->
<p v-for="item in array" v-text="item"></p>
<p v-for="(item,i) in array">
{{item}}~~~下标{{i}}
</p>
<!-- 遍历对象 -->
<p v-for="(value,key,index) in user">
{{index}}~~~{{key}}~~~{{value}}
</p>
<!-- 遍历集合 -->
<p v-for="user in userList">
ID: {{user.id}}
{{user.name}}
{{user.sex}}
</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
array: ["李易峰", "周杰伦", "杨紫"],
user: {
id: 1,
name: "sss",
sex: "女"
},
userList: [{
id: 1,
name: "sss",
sex: "女"
}]
},
methods: {
}
})
</script>
</body>
</html>
3.2循环结构总结
- 什么时候使用循环
多次重复的执行同一个操作. - 什么数据使用循环
1.数组
2.对象
3.数组套对象(集合) - 总结:
1. 如果遍历数组 参数 (value,index)
2. 如果遍历对象 参数 (value,key,index)
特点: 遍历数据在页面中展现
4.form表单数据绑定
4.1 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用表单属性</title>
</head>
<body>
<h1>本案例练习 表单提交数据时 数据如何与vue进行数据绑定</h1>
<div id="app">
<form id="userForm"action="http://www.baidu.com">
<div>
<span>
姓名:
</span>
<span>
<input type="text" name="name" v-model="name"/>
</span>
</div>
<div>
<span>性别:</span>
<span>
<!-- 单选框: name属性必须一致 -->
<input type="radio" name="gender" value="男" id="man" v-model="gender"/>
<label for="man">男</label>
<input type="radio" name="gender" value="女" id="women" v-model="gender"/>
<label for="women">女</label>
</span>
</div>
<div>
<span>爱好:</span>
<input type="checkbox" name="hobbies" value="吃" v-model="hobbies"/>吃
<input type="checkbox" name="hobbies" value="喝" v-model="hobbies"/>喝
<input type="checkbox" name="hobbies" value="玩" v-model="hobbies"/>玩
</div>
<div>
<span>职业</span>
<!-- 如果需要设置为多选 则添加属性 -->
<select name="occupation" v-model="occupation" multiple="true">
<option value="工人">工人</option>
<option value="教师">教师</option>
<option value="工程师">工程师</option>
</select>
</div>
<div>
<span>个人简介</span>
<textarea name="userInfo" style="width: 200px;height: 50px;" v-model="userInfo"></textarea>
</div>
<div>
<!-- 阻止默认提交事件 -->
<input type="submit" value="提交" v-on:click.prevent="submitForm"/>
</div>
</form>
</div>
<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
name: '输入名称',
gender: '女',
//多个数据定义时 应该使用数组
hobbies: ['吃','喝','玩'],
occupation: ['工人'],
userInfo: ''
},
methods: {
submitForm(){
//数据提交
console.log("姓名:"+this.name)
console.log("性别:"+this.gender)
console.log('爱好:'+this.hobbies)
console.log('职业:'+this.occupation)
console.log('用户详情:'+this.userInfo)
console.log('封装好数据之后,可以使用ajax方式实现数据提交')
}
}
})
</script>
</body>
</html>
5.表单修饰符
5.1案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支结构</title>
</head>
<body>
<div id="app">
<!--
语法:
.number 只输入数值类型
.trim 去除左右空格
.lazy 离焦事件才触发
-->
<div>
<h3>数据展示{{age}}</h3>
年龄:<input type="text" v-model.number="age" />
<button @click="addNum">增加</button>
<hr />
用户输入输入的长度:{{name.length}}<br />
用户名:<input type="text" v-model.trim="name" />
<hr />
展现数据{{msg}}
<br />
<input type="text" v-model.lazy="msg" />
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
age: 18,
name: '',
msg: '',
},
methods: {
addNum(){
this.age +=1
}
}
})
</script>
</body>
</html>
5.2 语法
语法:
.number 只能输入数值类型
.trim 去除左右空格
.lazy 离焦事件才触发
