Javascript
[Vue之style和class、数组更新与检测、条件渲染、事件修饰符]
本文主要是介绍[Vue之style和class、数组更新与检测、条件渲染、事件修饰符]，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
[Vue之style和class、数组更新与检测、条件渲染、事件修饰符]
style和class
数据的双向绑定
语法
:属性名=js变量/js语法
:class='js变量、字符串、js数组、js对象'
:style='js变量、字符串、js数组、js对象'
:自定义属性='js变量、字符串、js数组、js对象'
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的双向数据绑定</title>
<script src="./js/vue.js"></script>
</head>
-------------类属性-----------------------------------------------------------------
<style>
.color_red{
background: red;
}
.color_blue{
background: blue;
}
.fonta{
font-size: 80px;
}
-------------类属性-----------------------------------------------------------------
</style>
<body>
-----------测试内容-----------------------------------------------------------------
<div id="test">
属性前加冒号表示数据绑定，就可以写js的变量或语法
<div :class="class_obj">我是div</div>
<hr>
<div :style="style_obj">
我是另一个div
</div>
</div>
-----------测试内容-----------------------------------------------------------------
</body>
<script>
var vm = new Vue({
el: '#test',
data: {
// class_obj: 'div_cls_red', //字符串
// class_obj: ['div_cls_red'], //数组 ---用的多
class_obj: {div_cls_red: true}, //对象
// style_obj: 'background: green'// 字符串
// style_obj: [{background:'red'},] //数组，原来的css样式的- 全都使用驼峰替换
style_obj: {background:'yellow'} //原来的css样式的- 全都使用驼峰替换 ---用的多
//Vue.set(vm.style_obj,'fontSize','90px')
},
})
</script>
</html>
style_obj: 'background: blue'// 字符串
style_obj: [{background: 'blue'},] //数组，原来的css样式的- 全都使用驼峰替换
style_obj: {background:'red'} //原来的css样式的- 全都使用驼峰替换 ---用的多
Vue.set(vm.style_obj,'fontSize','80px')
:class='字符串'
var vm = new Vue({
el: '#test',
data: {
class_obj: 'color_red', //字符串
},
})
:class='字符串'的修改
:class='数组'
var vm = new Vue({
el: '#test',
data: {
class_obj:['color_red','fonta'], //数组 ---用的多
},
})
:class='数组'的修改
:class='数组'补充
var vm = new Vue({
el: '#test',
data: {
# 也可以用列表套字典写法
class_obj:[{color_red:true},{fonta:false}],
},
})
:class='数组'补充的修改方式
:class='对象'
var vm = new Vue({
el: '#test',
data: {
class_obj: {color_blue: true,fonta:true}, //对象
},
})
:class='对象'的修改
数组更新与检测
可以检测到变动的数组操作
push：最后位置添加 pop：最后位置删除 shift：第一个位置删除 unshift：第一个位置添加 splice：切片 sort：排序 reverse：反转
检测不到变动的数组操作
filter()：过滤 concat()：追加另一个数组 slice()： map()：
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>检测与更新</title>
<script src="./js/vue.js"></script>
</head>
<style>
.color_red{
background: red;
}
.color_blue{
background: blue;
}
.fonta{
font-size: 80px;
}
</style>
<body>
<div id="test">
<div :class="class_obj">这是第一个div</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#test',
data:{
name:'刘鹏飞啊',
class_obj: {color_blue: true,},
},
})
</script>
</html>
示例总结
从上面的图可以看出，有些方法，是不会触发 dom 的操作，比如 对象[key] = value 或者 对象.key = value 虽然属性已经设置了，但是没有触发 dom 操作，这个时候就需要用 Vue 的其他方法。 # 一定会触发dom的比较，如果有数据变了。页面没变，使用该方式赋值 Vue.set(vm.class_obj,'fonta',true) # 给 class_obj 的 fonta 属性 赋值 true Vue.delete(vm.class_obj,'color_blue') # 删除 class_obj 的 color_blue 属性
更新和检测原因
作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写） vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
条件渲染
| 指令 | 释义 |
|---|---|
| v-if | 相当于： if |
| v-else | 相当于：else |
| v-else-if | 相当于：else if |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if的使用</title>
<script src="./js/vue.js"></script>
</head>
<style>
</style>
<body>
<div id="app">
<p v-if="type==0">第 1 行</p>
<p v-else-if="type==1">第 2 行</p>
<p v-else-if="type==2">第 3 行</p>
<p v-else>第 4 行</p>
</div>
</body>
<script>
var vm = new Vue({
el:'#test',
data:{
type:1
},
})
</script>
</html>
在上面的基础进行一次变形
<div id="test">
<button @click="addone">这是一个按钮</button>
<p v-if="typea==1">第 1 行</p>
<p v-else-if="typea==2">第 2 行</p>
<p v-else-if="typea==3">第 3 行</p>
<p v-else>第 4 行</p>
</div>
<script>
var vm = new Vue({
el:'#test',
data:{
typea:1
},
methods:{
addone(){
console.log(this.typea)
this.typea=this.typea+1
}
}
})
</script>
v-if+v-for控制购物车显示与否
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车的显示与否</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
</style>
<body>
<div id="test" >
<button @click="showtime">这是一个按钮</button>
<table class="table">
<tr>
<td>名字</td>
<td>价钱</td>
</tr>
<tr v-if="shopping.length==0">
<td>没有数据啊</td>
<td>没有数据啊</td>
</tr>
<tr v-else v-for="shop,index in shopping">
<td>{{shop.name}}</td>
<td>{{shop.price}}</td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el:'#test',
data:{
shopping: [],
},
methods:{
showtime(){
this.shopping=[
{'name': '番茄', 'price': 20},
{'name': '土豆', 'price': 30},
{'name': '西红柿', 'price': 20},
{'name': '番茄炒西红柿', 'price': 40},
]
}
}
})
</script>
</html>
v-for遍历补充 key
1、vue中涉及到循环，通常能看到，:key="item"
<p v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</p>
2、vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度
在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
页面更新之后，会加速DOM的替换（渲染）
:key="变量"
参考文档 : https://www.zhihu.com/question/61064119
过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤案例</title>
<script src="./js/vue.js"></script>
</head>
<style>
</style>
<body>
<div id="test">
<input type="text" v-model="serach" @input="showtime">
<p v-for=" msg,index in newlist">第{{index+1}}个是{{msg}}</p>
</div>
</body>
<script>
//数组过滤的使用(1)
// var ages = [32, 33, 16, 40,8,9,17,18];
// var ages_new=ages.filter(function (item) {
// // console.log(item)
// return item >= 18
// })
// console.log(ages_new)
// 使用箭头函数(es6的语法，箭头函数)
// var ages = [32, 33, 16, 40, 8, 9, 17, 18];
// var ages_new = ages.filter(item => {
// return item >= 18
// })
// console.log(ages_new)
var vm = new Vue({
el: '#test',
data: {
serach:'',
baselist:['a','abc','bcd','bdgd','cfdag','cbfd','cwefd','fdoan','fu','fing','liui','linng','lpq','pzx','pmm',],
newlist:[]
},
methods: {
showtime() {
this.newlist = this.baselist.filter(item => {
var num = this.serach.length
if(this.serach === 'all'){
return true
}
if( num === 0){
return false
}
return item.indexOf(this.serach)>-1
})
}
}
})
</script>
</html>
事件修饰符
| 事件修饰符 | 释义 |
|---|---|
| .stop | 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡） |
| .self | 只处理自己的事件，子控件冒泡的事件不处理 |
| .prevent | 阻止a链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
@事件.self @事件.stop
--------------冒泡事件-------------------------------------------------------------
<div id="app">
<div @click.self="one('第一个div')">第一个div
<div @click="one('第一个div里面的div')">第一个div里面的div
<div @click="one('第一个div里面的div里面的div')">第一个div里面的div里面的div</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#test',
data: {},
methods:{
one(msg){
console.log(msg)
}
}
})
</script>
div包裹div里面再包裹一层div
如果都有点击事件，点击里层的，会同时触发外层的事件
--------------阻止冒泡------------------------------------------------------
<div @click.self="one('第一个div')">第一个div
<div @click="one('第一个div里面的div')">第一个div里面的div
<div @click.stop="one('第一个div里面的div里面的div')">第一个div里面的div里面的div
</div>
</div>
关于事件.self和事件.stop
.self 是对于子类行为不作为，也就是说子类中有点击事件，自己也有事件，子类如何都不会触发自己的事件。 .stop 是对父类不作为行为，自己和父类都有点击事件，自己触发之后结束，不会冒泡。
@事件.prevent
<div id="test">
<a href="https://github.com/" @click="one(点击了一下a标签)">点我即可</a>
</div>
<script>
var vm = new Vue({
el: '#test',
data: {},
methods:{
one(msg){
console.log(msg)
}
}
})
</script>
先触发了点击事件，然后跳转
事件添加 prevent
<a href="https://github.com/" @click.prevent="one('点击了一下a标签')">点我即可</a>
@事件.once
<div id="test">
<p @click="one">点了 {{serach}} 次</p>
</div>
<script>
var vm = new Vue({
el: '#test',
data: {
serach:1,
},
methods:{
one(){
this.serach+=1
}
}
})
</script>
事件可以一直触发，有时候为了避免这种情况可以用once
<p @click.once="one">点了 {{serach}} 次</p>
这篇关于[Vue之style和class、数组更新与检测、条件渲染、事件修饰符]的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
原创自研vue3 setup+arco.design网页版webos系统07-26
-
Vue如何实现数据的上移和下移07-17
-
组长：你熟悉过React，开发个Next项目模板吧，我：怎么扯上关系的？07-16
-
React NextJS App Router 实时获取API07-16
-
首创vite5.x+vue3+elementPlus仿微信web版聊天07-16
-
electron31+vue3桌面聊天exe系统07-16
-
python项目导入上级目录设置”的setting.json是不是哪里还有错误呀？07-15
-
vue 新建功能多条数据（还没和后端交互）还能看详情 数据是前端缓存到本地吗？-icode9专业技术文章分享07-06
-
React Native常用组件-点击组件05-30
-
uniapp+vue3+uv-ui手机端后台OA管理模板05-30
-
Python网络爬虫的时候json=就是让你少写个json.dumps()05-29
-
React Native常用组件-展示组件05-27
-
React Native常用组件-列表组件05-27
-
vue3开发前端表单缓存自定义指令，移动端h5必备插件05-09
-
React Hooks在class组件中的使用方式05-09
栏目导航
