一、vue处理class 和 style
使用实例:点击li标签高亮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/vue.js"></script>
<title>Document</title>
<style>
.active{
font-size: 50px;
color: yellowgreen;
font-weight: 800;
}
</style>
</head>
<body>
<div id="root">
<ul>
<li v-for = '(li,index) in list' @click = 'handleClick(index)' :class="{active:index == curIndex}">
{{li}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#root',
data:{
list: ['aaaa','bbbbb','ccccc'],
curIndex:1
},
methods:{
handleClick(index){
this.curIndex = index
}
}
})
</script>
</body>
</html>
二、 v-if和v-show,以及v-if，v-else,v-elseif 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id ="app">
<!-- <div v-show = 'false'>
努力学习
</div>
<div v-if = 'true'>
显示
</div>
<div v-if = 'false'>
隐藏
</div>
<div v-if = 'isShow'>
{{hello}}
</div> -->
<!-- <div>yyyyyy</div> 不允许有第三者 -->
<!-- <div v-else-if = 'isShowHide'>
{{msg}}
</div>
<div v-else>
{{title}}
</div> -->
<div >
<ul>
<!-- 正常情况下 v-for和v-if在一个元素上 v-for比v-if 的优先级更高,想让v-if更高，就把它放在外层元素上 -->
<li v-if = 'item == "a"' v-for = 'item in list'> {{item}} </li>
</ul>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
hello:'gggg',
msg:'112233232',
title:'wodetian',
isShow:false,
isShowHide:true,
list:[
'a',
'b',
'c'
]
},
methods: {}
})
</script>
</body>
</html>
v-for学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for</title>
<script src="../vue.js"></script>
</head>
<body>
<div id ="app">
<div>
<!-- v-for双重循环 -->
<!-- <ul>
<li v-for = 'li in list'>
<span v-for = 'item in li'> {{item}} </span>
</li>
</ul> -->
<!-- 对象遍历 (值，键，顺序)-->
<!-- <ul v-for = "li,index,id in obj">
<li>
{{ index }} : {{li}} :{{id}}
</li>
</ul> -->
<!-- <template> -->
<!-- <my-header v-for='item in list2' :key = 'item'>
{{item}}
</my-header> -->
<!-- </template> -->
<!-- v-for和computed的配合使用 -->
<!-- <ul>
<li v-for= 'li in list3'>
{{li}}
</li>
</ul> -->
<!-- 可以遍历一个数字,值从 1 开始 -->
<!-- <div v-for = 'n,i in 10'>
{{n}} ---{{i}}
</div> -->
<!-- 遍历字符串 -->
<!-- <div v-for = 'item in "abcdefgh"'>
{{item}}
</div> -->
<!-- 循环数字的用法 -->
<template v-for = 'n in 10'>
<div>hahah</div>
<div>拼命学习</div>
</template>
</div>
</div>
<script>
const myHeader = {
template:'<h1>header</h1>'
}
var vm = new Vue({
el: '#app',
data: {
list:[
['a','b','c'],
['d','e','f'],
['g','h','j']
],
list2:[
'a','b','c','e'
],
obj:{
x: 0,
y: 1,
z: 2
}
},
components:{
'my-header':myHeader
},
computed:{
list3(){
return this.list2.filter((value,index) => index % 2 == 0 )
}
},
methods: {}
});
</script>
</body>
</html>
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
