Vue3.js --- 样式绑定 & 循环遍历
1. 样式绑定
动态内联样式绑定
• 对象语法
对象语法在HTML标签中利用style属性自定义相关CSS样式
请注意，需要使用数据绑定绑定Vue中的数据与标签中的属性
<!DOCTYPE html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="foot">
<div v-bind:style="{backgroundColor:background}" style="width:100px;height: 100px;"></div>
</div>
</body>
<script>
const vm = Vue.createApp({
data(){
return {
background:'red'
}
}
})
const app = vm.mount('#foot')
</script>• 数组语法
在Vue对象中预先对CSS样式进行设定好，直接将相关属性内容嵌入HTML中的style标签中
<!DOCTYPE html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="foot">
<div v-bind:style="{backgroundColor:background}" style="width:100px;height: 100px;"></div>
<br>
<div :style="backgroundstyle"></div>
</div>
</body>
<script>
const vm = Vue.createApp({
data(){
return {
background:'red',
backgroundstyle:{
backgroundColor:'red',
height:'50px',
width:'100px'
}
}
}
})
const app = vm.mount('#foot')
</script>样式修改例子：
2. Vue遍历
v-for 是 Vue.js 中用于循环渲染列表的指令，可以动态地将数组、对象或指定的范围数据绑定到 HTML 元素上。它是 Vue 中实现数据驱动的视图和动态渲染的核心指令之一。
<!DOCTYPE html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="foot">
<ul>
<li v-for="(item,index) in animals" ::key="index">{{item}}</li>
</ul>
</div>
</body>
<script>
const vm = Vue.createApp({
data(){
return{
animals:['monkey','panda','bird']
}
}
})
vm.mount('#foot')
</script>v-for为其配置一个Vue中的数组元素，以循环的形式创建多个标签，item接受数组的value，index接受数组的key值，保证数组的完整输出与后续操作
2.1 遍历对象
在Vue中遍历对象与遍历数组使用方法一致，使用item,value分别接收对象所传入的内容与键值
<!DOCTYPE html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="foot">
<ul>
<li v-for="(item,index) in animals" ::key="index">{{item}}</li>
</ul>
<div v-for="(item,value) in student">{{item}}</div>
</div>
</body>
<script>
const vm = Vue.createApp({
data(){
return{
animals:['monkey','panda','bird'],
student:{
age:18,
name:'Louis'
}
}
}
})
const app = vm.mount('#foot')
</script>
2.2 数组的操作
| 函数 | 使用方法 | 作用 |
| push() | this.items.push('New Item'); | 在队尾添加新的数据 |
| shift() | const firstItem = this.items.shift(); | 移除数组的第一个元素并返回 |
| pop() | const lastItem = this.items.pop(); console.log(lastItem); // 输出被移除的元素 | 弹出队尾的数据并返回 |
| sort() | this.items.sort() | 将数组由小到大排序 |
| splice() | // 从索引 1 开始删除 1 个元素，并插入 'New Item' this.items.splice(1, 1, 'New Item'); | 从指定位置开始添加，移除或替换元素 |
| map() | const newItems = this.items.map(item => item.toUpperCase()); | 返回新的数组，每个元素经过指定函数处理后的 |
| unshift() | this.items.unshift('First Item'); | 在队首添加新的元素 |
原文地址：https://blog.csdn.net/qq_51222843/article/details/143378969
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！