VUE(下)
VUE指令
表单指令
数据的双向指令
v-model = "变量"
model绑定的变量,控制的是表单元素的value
值
- 普通表单元素用
v-model
直接绑定控制value
值 - 单一复选框,函数中的是
true
或false
- 多个复选框中,函数中写的是空列表,如果列表中有字符串,表示默认选中这个选项
- 单选框中,函数的值可以为字符串,这个字符串还是value中的值,默认选中
vue"><body> <div >
<form action="">
<!--属性指令:v-model="变量",v-model绑定的变量控制的是表单元素的value值 -->
<!--普通表单元素,用v-model直接绑定变量控制value值-->
<input type="text" v-model="v1">
<input type="text" v-model="v1">
<textarea name="" ></textarea>
<p>{{ v1 }}</p>
<hr>
<!--单一复选框-->
同意:
<input type="checkbox" name="agree" v-model="v2">
<hr>
<!--多个复选框-->
男:<input type="checkbox" name="hobbies" value="male" v-model="v3">
女:<input type="checkbox" name="hobbies" value="female" v-model="v3">
哇塞:<input type="checkbox" name="hobbies" value="wow" v-model="v3">
<p>{{ v3 }}</p>
<hr>
<!--单选框-->
中午吃啥:<br>
肉肉:<input name="food" type="radio" value="rourou" v-model="v4">
饭饭:<input name="food" type="radio" value="fanfan" v-model="v4">
<p>{{ v4 }}</p>
<hr>
<button type="submit">提交</button>
</form>
</div>
</body>
斗篷指令
解决网页加载闪烁
解决方法:
- 可以先加载VUE环境
v-cloak
,他就类似于一个属性,有VUE环境,他这个属性就被取消了!!!
<style> [v-cloak] {
display: none;
}
</style>
条件指令
v-if = "true|false"
:为假时,在页面上不渲染,可以隐藏标签中的信息
v-sow = "true|false"
:为假时,页面中用display:none
渲染,虽然没有展示,但是仍在页面结构中
v-if
是一个家族
v-if
v-else-if
以上两个当为假时,即等于0时,v-else
出现,且不需要条件,一旦分值成立,下分支就会被屏蔽
v-else
<p v-if="false">if指令</p> <p v-show="false">show指令</p>
<p v-if="v1 === '1'">if分支</p>
<p v-else-if="v1 === '2'">elif分支1</p>
<p v-else-if="v1 === '3'">elif分支2</p>
<p v-else>else分支</p>
循环指令
语法:
v-for = "成员的容器"
- 字符串循环渲染:可以只遍历值,也可以遍历值与索引
- 数组循环渲染:
- 对象循环渲染:可以遍历值、可以遍历值与key、可以遍历值,key,index
<!--1、字符串循环渲染: 可以只遍历值,也可以遍历值与索引--> <p>
<span v-for="v in title">{{ v }}</span>
</p>
<p>
<span v-for="(v, i) in title">
<span v-if="i != 0"> | </span>
{{ v }}
</span>
</p>
<!--2、数组循环渲染: 可以只遍历值,也可以遍历值与索引-->
<div>
<p v-for="(v, i) in arr">第{{ i }}元素:{{ v }}</p>
</div>
<!--3、对象循环渲染: 可以只遍历值,也可以遍历值与键,还可以遍历值、键与索引-->
<div>
<p v-for="v in people">{{ v }}</p>
</div>
<div>
<p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
</div>
<div>
<p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
</div>
<br>
<div>
<div v-for="(stu, i) in stus">
<hr v-if="i != 0">
<p v-for="(v, k) in stu">{{ k }}:{{ v }}</p>
</div>
</div>
VUE成员
分隔符成员
用来修改插值表达式符号:delimiters
<script> new Vue({
el: '#app',
data: {
num: 100
},
delimiters: ['{', ']}'],
})
</script>
计算属性成员
computed
:里面是函数
- 他定义的是方法属性,data中定义的也是属性,所以不需要重复定义
- 方法属性的值来源于绑定方法的返回值
- 方法属性必须在页面中渲染后,绑定的方法才会被调用
- 方法中出现的所有变量都会被监听,任何变量发生值更新都会调用一次绑定方法,重新更新一下方法属性的值
- 方法属性值不能手动设置,必须通过绑定的方法进行设置
<script> new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '结果',
},
computed: {
res () {
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';
}
}
})
</script>
属性的监听
watch
:
- 给已有属性设置监听方法
- 监听的属性值一旦发生更新,就会调用监听方法,在方法中完成相应逻辑
- 监听方法不需要返回值,返回值只有主动结束方法的作用
<script> new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {
// 1、watch中给已有的属性设置监听方法
// 2、监听的属性值一旦发生更新,就会调用监听方法,在方法中完成相应逻辑
// 3、监听方法不需要返回值(返回值只有主动结束方法的作用)
full_name() {
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>
补充
sessionstorage
的生命周期与页面标签绑定,当标签页关闭,数据库被清空eg:刷新页面不会重新开始localstorage
:前台永久数据库eg:关闭浏览器不会重新开始,而是停留在浏览的位置数组操作:push、pop、unshift、shift、splice
splice
可以完成数组的增删改
let arr[1,2,3,4]arr.splice(0,0,0) //以索引0开始,操作长度为0、操作的结果为0
以上是 VUE(下) 的全部内容, 来源链接: utcz.com/z/378950.html