VUE指令（三）
（一） v-if
1、v-if v-else-if v-else
vue的条件指令可以根据表达式的值在dom中渲染或销毁元素或组件
2、v-if
后面的条件为false时，对应的元素以及其子元素不会渲染也就是说不会有对应的标签出现在dom中
<body
>
<div id
="app">
<h2 v
-if="isshow">{{message
}}</h2
>
<!-- v
-if为
false时显示v
-else -->
<h1 v
-else>sdf
</h1
>
<!-- v
-else-if -->
<h2 v
-if="score>=90">优秀
</h2
>
<h2 v
-else-if="score>=80">良好
</h2
>
<h2 v
-else-if="score>=60">良好
</h2
>
<h2 v
-else>及格
</h2
>
</div
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
const app
= new Vue({
el
: '#app',
data
: {
message
: 'as',
isshow
: true,
score
: 57
},
methods
: {
},
})
</script
>
（二）v-show
■v-show的用法和v-if非常相似,也用于决定一个元素是否渲染
v-if和v-show对比
1、v-if当条件为false时,压根不会有对应的元素在DOM中。
2、v-show当条件为false时,仅仅是将元素的display属性设置为none而已。
3、当需要在显示与隐藏之间切片很频繁时,使用v-show
4、当只有一次切换时,通过使用v-if
<body
>
<div id
="app">
<h2 v
-show
="isshow">{{message
}}</h2
>
</div
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
const app
= new Vue({
el
: '#app',
data
: {
message
: 'as',
isshow
: true
},
})
</script
>
（三）v-for
1、 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
<body
>
<div id
="app">
<ul
>
<!-- 没有使用索引值（下标值）
-->
<li v
-for="item in names">{{item
}}</li
>
</ul
>
<ul
>
<!-- 有索引值（下标值）
-->
<li v
-for="(item,index) in names">{{index
+1}}.{{item
}}</li
>
</ul
>
<ul
>
<!-- 遍历对象，如果只是获取一个值，获取到的时value
-->
<li v
-for="item in info">{{item
}}</li
>
</ul
>
<ul
>
<!-- 遍历对象，获取key和value 格式：（value，key）
-->
<li v
-for="(value,key) in info">{{key
}}:{{value
}}</li
>
</ul
>
<ul
>
<!-- 获取key，value，index 格式：（value，key，index）
-->
<li v
-for="(value,key,index) in info">{{index
}}--{{key
}}:{{value
}}</li
>
</ul
>
<ul
>
<!-- key给每个节点作唯一标识，为了高效的更新虚拟dom
-->
<li v
-for="item in letters" :key
="item">{{item
}}</li
>
</ul
>
</div
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
const app
= new Vue({
el
: '#app',
data
: {
names
: ['sf', '24', 'dfsg', 'dfsg'],
info
: {
name
: 'a',
age
: 1,
height
: 7
},
letters
:['a','b','c','d','e']
},
})
</script
>
2、响应式修改数组：
<body
>
<div id
="app">
<ul
>
<li v
-for="item in letters">{{item
}}</li
>
</ul
>
<button @click
="btn">按钮
</button
>
</div
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
const app
= new Vue({
el
: '#app',
data
: {
letters
: ['a', 'b', 'c', 'd', 'e','a']
},
methods
: {
btn() {
this.letters
.push('aaa') 在数组最后面添加元素
this.letters
.pop() 删除最后一个元素
this.letters
.shift() 删除第一个元素
this.letters
.unshift("aaa") 在数组最前面添加元素
this.letters
.splice(2, 0, 'a')
this.letters
.reverse()
this.letters
.sort()
Vue
.set(this.letters
,0,'daf')
this.letters
[0]='ss'
}
},
})
</script
>
（四）v-model
v-model:实现表单元素和数据的双向绑定
1.v-bind绑定一个value属性
2.v-on给当前元素绑定input事件
v-model修饰符
lazy修饰符:
1）默认情况下, v-model默认是在input事件中同步输入框的数据的。
2）也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变。
3）lazy修饰符可以让数据在失去焦点或者回车时才会更新
umber修饰符:
1）默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。
2）但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。
3）number修饰符可以让在输入框中输入的内容自动转成数字类型
trim修饰符
1）如果输入的内容首尾有很多空格,通常我们希望将其去除
2）trim修饰符可以过滤内容左右两边的空格
<body
>
<!-- input
-->
<div id
="app">
<input type
="text" v
-model
="message">
<input type
="text" :value
="message" @input
="valuechange">
<input type
="text" :value
="message" @input
="message = $event.target.value">
<h2
>{{message
}}</h2
>
</div
>
<!-- 唯一 radio
-->
<div id
="app1">
<label
for="male">
<input type
="radio" id
="male" name
="sex" value
="男" v
-model
="sex">男
</label
>
<label
for="femal">
<input type
="radio" id
="female" name
="sex" value
="女" v
-model
="sex">女
</label
>
<h2
>选择的性别是：
{{sex
}}</h2
>
</div
>
<!-- 单选框
-->
<div id
="app2">
<label
for="agree">
<input type
="checkbox" id
="agree" v
-model
="isagree">同意协议
</label
>
<h2
>你选择的是：
{{isagree
}}</h2
>
<button
:disabled
="!isagree">下一步
</button
>
</div
>
<!-- 多选框
-->
<div id
="app3">
<input type
="checkbox" value
="篮球" v
-model
="hobbies">篮球
<input type
="checkbox" value
="羽毛球" v
-model
="hobbies">羽毛球
<input type
="checkbox" value
="足球" v
-model
="hobbies">足球
<h2
>爱好时
{{hobbies
}}</h2
>
</div
>
<!-- select
-->
<div id
="app4">
<!-- 选择一个
-->
<select name
="abc" id
="" v
-model
="fruit">
<option value
="苹果">苹果
</option
>
<option value
="香蕉">香蕉
</option
>
<option value
="梨子">梨子
</option
>
<option value
="榴莲">榴莲
</option
>
</select
>
<h2
>水果
:{{fruit
}}</h2
>
<!-- 多选
-->
<select name
="abc" id
="" v
-model
="fruits" multiple
>
<option value
="苹果">苹果
</option
>
<option value
="香蕉">香蕉
</option
>
<option value
="梨子">梨子
</option
>
<option value
="榴莲">榴莲
</option
>
</select
>
<h2
>水果
:{{fruits
}}</h2
>
</div
>
<!-- 值绑定 (动态获取
)-->
<div id
="app5">
<label
:for="item" v
-for="item in originhobbies">
<input type
="checkbox" name
="" :id
="item" :value
="item" v
-model
="hobbies">{{item
}}
</label
>
<h2
>爱好是：
{{hobbies
}}</h2
>
</div
>
<!-- 修饰符：lazy
-->
<div id
="app6">
<input type
="text" name
="" id
="" v
-model
.lazy
="message">
<h2
>{{message
}}</h2
>
</div
>
<!-- 修饰符number
-->
<div id
="app7">
<input type
="number" name
="" id
="" v
-model
.number
="age">
<h2
>{{typeof age
}}</h2
>
</div
>
<!-- 修饰符：trim
-->
<div id
="app8">
<input type
="text" v
-model
.trim
="name">
<h3
>{{name
}}</h3
>
</div
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
const app
= new Vue({
el
: '#app',
data
: {
message
: 'as',
},
methods
: {
valuechange(event
) {
this.message
= event
.target
.value
}
},
})
const app1
= new Vue({
el
: "#app1",
data
: {
sex
: '男'
}
})
const app2
= new Vue({
el
: "#app2",
data
: {
sex
: '男',
isagree
: false
}
})
const app3
= new Vue({
el
: "#app3",
data
: {
hobbies
: []
}
})
const app4
= new Vue({
el
: "#app4",
data
: {
fruit
: "香蕉",
fruits
:[]
}
})
const app5
= new Vue({
el
: "#app5",
data
: {
originhobbies
: ["篮球","足球","羽毛球","台球"],
hobbies
:[]
}
})
const app6
= new Vue({
el
: "#app6",
data
: {
message
:"dfs"
}
})
const app7
= new Vue({
el
: "#app7",
data
: {
age
:20
}
})
const app8
= new Vue({
el
: "#app8",
data
: {
name
:"dfs"
}
})
</script
>
