Vue指令补充
<!--
v-model.trim 去除文本前后的空格，只保留没有前后空格的文本内容
v-model.number 将文本中可以转成number的字符串变成字符串
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
border: 3px solid black;
font-size: 30px;
margin-top: 10px;
}
.pink{
background-color: pink;
}
.big{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="app">
<div class="box" v-bind:class="{pink:true,big:false}" >
盒子1
</div>
<div class="box" v-bind:class="['pink','big']">
盒子2
</div>
</div>
</body>v-bind导航栏菜单切换
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
border-bottom: 2px solid #e01222;
padding: 0 10px;
}
li {
width: 100px;
height: 50px;
line-height: 50px;
list-style: none;
text-align: center;
}
li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #333333;
}
li a.active {
background-color: #e01222;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- @click单击事件里面可以动态去获取选中的下标 -->
<!-- 高亮判定条件，当前列表项下标等于选中列表项的下标 -->
<li v-for="(item,index) in list" :key="item.id" @mouseover="activeIndex=index">
<a :class="{active:index===activeIndex}" href="">{{item.name}}</a>
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
const v = new Vue({
el:"#app",
data:{
activeIndex:4,
list:[
{id:1,name:"京东秒杀"},
{id:2,name:"每日特价"},
{id:3,name:"品类秒杀"}
]
}
})
</script>v-bind控制行内样式
v-model作用域其他表单上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>个人信息注册</h3>
姓名：
<input type="text" v-model="username">
<br><br>
是否单身：
<input type="checkbox" v-model="isSingle">
<br><br>
<!--
前置理解：
1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥
2. value: 给单选框加上 value 属性，用于提交给后台的数据
结合 Vue 使用 → v-model
-->
性别:
<input v-model="gender" type="radio" name="sex" value="1">男
<input v-model="gender" type="radio" name="sex" value="2">女
<br><br>
<!--
前置理解：
1. option 需要设置 value 值，提交给后台
2. select 的 value 值，关联了选中的 option 的 value 值
结合 Vue 使用 → v-model
-->
所在城市:
<select v-model="cit">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="cd">成都</option>
<option value="nj">南京</option>
</select>
<br><br>
自我描述：
<textarea v-model="desc"></textarea>
<button>立即注册</button>
</div>
<script src="js/vue.js"></script>
<script>
Vue.config.devtools = true;
const app = new Vue({
el: '#app',
data: {
username:'',
isSingle: false,
gender:1,
city: '',
desc:''
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>礼物清单</h3>
<table>
<tr>
<td>名字</td>
<td>数量</td>
</tr>
<tr v-for="(item,index) in list">
<td>{{item.name}}</td>
<td>{{item.num}}个</td>
</tr>
</table>
<!-- 目标：统计总和，使用computed统计总数，使用函数名称一定不要带"()" -->
<p>礼物总数：{{gettotalcount}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.config.devtools = true;
const v = new Vue({
el:"#app",
data:{
list:[
{id:1,name:"篮球",num:1},
{id:2,name:"玩具",num:2},
{id:3,name:"铅笔",num:5},
]
},
computed:{
gettotalcount(){
//定义计算逻辑，将list中的num取出进行累加
return this.list.reduce((sum,item)=>sum + item.num,0)
}
}
})
</script>
</html>
简而言之，methods的函数方法每次调用都会执行一次，computed会使用缓存，一次刷新最多执行一次
<body>
<div id="app">
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model="lastName"><br>
<p>姓名：{{fullName}}</p>
<button @click="changeName()">修改姓名</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: '',
lastName:''
},
methods:{
changeName(){
this.fullName = "张小飞"
}
},
computed: {
//定义计算属性 获取结果
/* fullName(){
return this.firstName + this.lastName
} */
fullName:{
get(){
return this.firstName + this.lastName
},
set(value){
this.firstName = value.slice(0,1);
this.lastName = value.slice(1);
}
}
}
})
</script>
</body>set方法会在调用=时，将=后面的内容当作value传入
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
监听简单的数据：<input type="text" v-model="username">
监听对象的属性：<input type="text" v-model="user.name">
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.config.devtools = true;
const vue = new Vue({
el:"#app",
data:{
username:'eric',
user:{name:'kobe'}
},
watch:{
//监听简单的数据
username(newValue,oldValue){
console.log('新值:',newValue,'旧值:',oldValue)
},
//监听对象的属性
'user.name'(n1,n2){
console.log('新值:',n1,'旧值:',n2)
}
}
})
</script>
</html>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
监听简单的数据：<input type="text" v-model="username">
监听对象的属性：<input type="text" v-model="user.name">
深度监听：<input type="text" v-model="emp.empname">
<input type="text" v-model="emp.address">
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.config.devtools = true;
const vue = new Vue({
el:"#app",
data:{
username:'eric',
user:{name:'kobe'},
emp:{
empname:"jass",address:"USA"
}
},
computed:{
newEmp(){
return JSON.stringify(this.emp);
}
},
watch:{
//监听简单的数据
username(newValue,oldValue){
console.log('新值:',newValue,'旧值:',oldValue)
},
//监听对象的属性
'user.name'(n1,n2){
console.log('新值:',n1,'旧值:',n2)
},
//深度监听
"newEmp":{
handler(nv,ov){//nv:属性值发生变化的对象 ov:原来的值对应的对象
console.log("新：", JSON.stringify(nv),"旧：",JSON.stringify(ov));
},
deep:true, //开启深度监听
immediate:true, //开启立即监听
}
}
})
</script>
</html>