目录
第一部分:class类绑定的几种写法
第二部分：style样式绑定的几种写法
第三部分：v-if和v-show的使用（相同点与不同点）及v-if与template配合使用
数组，对象，字符串，指定次数的遍历
第一部分:class类绑定的几种写法
<style type="text/css">
/* 绑定样式 共计有7个 测试可以在控制台上的页面文本去改变类*/
.basic {
width: 400px;
height: 100px;
border: 1px solid pink;
}
/* 以下三个类是选择的 */
.happy {background-color: aqua;}
.sad {background-color:orangered;}
.normal {background-color: chartreuse;}
/* 下面三个类可以同时使用 */
.atguigu1 {border-radius:8%;}
.atguigu2 {font-size:20px;
box-shadow:2px 3px 5px #FF4500;}
.atguigu3 {color:lightsalmon;}
</style>
</head>
<body>
<div id="root">
<!-- 测试 绑定样式 -->
<!-- 第一个类是固定的基本内容 第二个是动态绑定一个类 v-bind简写成:
第三个是绑定一个点击事件 中间部分的内容是插值语法-->
<!--绑定class样式 字符串写法 适用于样式的类不确定 需要动态指定 -->
<!-- <div class="basic" :class="norml" @click="changhappy">{{name}}</div> -->
<!-- 绑定class样式 数组写法，适用于绑定的样式个数不确定、名字不确定 -->
<div class="basic" :class="classArr" @click="change">{{name}}</div>
<!-- 绑定class样式 对象写法 ，适用于：要绑定的样式个数确定，名字确定弹药动态决定用不用
-->
<!-- <div class="basic" :class="classObj" class="toll">{{name}}</div> -->
<!-- 以上两个(对象及数组内部的值可以不用在data中定义编写，可以直接在上面绑定对象内部编写，但是不便于变更值，所以很少用，需要谨慎) -->
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name: '北京',
norml: 'ttp',
classArr:['atguigu1','atguigu2','atguigu3'],
classObj:{
atguigu1:false,
atguigu1:false
},
color:'red',
//注意：这里的style样式若是两个单词连成，那么必须要去掉-，然后第二个单词要大写才可以
backgroundColor:'orange'
},
methods:{
// 第一部分点击事件
// changhappy(){
// //指的是点击一次页面文本就改变一个类
// // this.norml='sad'
// //若要随机实现类 那就要对所有的类进行汇总 添加到一个数组中
// //然后根据数组将该数据通过随机数取值的方式实现 那么
// const arr = ['happy','sad','normal']
// // 向下取整,并且是取整数 将值放入数组中然后传给冬天绑定的类
// this.norml =arr[Math.floor(Math.random()*3)]
// //点击后会自动改变颜色
// }
// 第二部分点击事件
change(){
this.classArr = this.classArr[Math.floor(Math.random()*1)]
}
}
})
// // 回顾补充知识点
//new Promise((第一个传的是真(成功),第二个传的是假(失败))=>{
// })
</script>
第二部分：style样式绑定的几种写法
<style type="text/css">
/* 绑定样式 共计有7个 测试可以在控制台上的页面文本去改变类*/
.basic {
width: 400px;
height: 100px;
border: 1px solid pink;
}
/* 以下三个类是选择的 */
.happy {background-color: aqua;}
.sad {background-color:orangered;}
.normal {background-color: chartreuse;}
/* 下面三个类可以同时使用 */
.atguigu1 {border-radius:8%;}
.atguigu2 {font-size:20px;
box-shadow:2px 3px 5px #FF4500;}
.atguigu3 {color:lightsalmon;}
</style>
</head>
<body>
<!-- 绑定样式:
1，class样式
写法：
:class='xxx' xxx 可以使字符串、对象、数组
字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字不确定
数组写法适用于：要绑定多个样式，个数确定，名字确定，但不确定用不用
2，style样式
:style='{fontSize:xxx}' 其中xxx是动态值
:style="[a,b]" 其中a,b 是样式对象-->
<div id="root">
<!-- 以下所有的样式绑定都需要绑定v-bind动态绑定 -->
<!-- 绑定style样式 对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div><br><br>
<!-- 绑定style样式 数组的写法 但是该方法不可用，因为无法实现-->
<div class="basic" :style="['styleObj','styleObj2']">{{name}}</div><br><br>
<!-- 绑定style样式 数组的写法 -->
<div class="basic" :style="styleArr">{{name}}</div><br><br>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'绑定样式',
<!-- 样式对象内部的值必须是存在的，不能自定义去写 -->
classObj:{
atguigu1:false,
atguigu2:false
},
styleObj:{
fontSize:'40px',
color:'red'
},
styleObj2:{
backgroundColor:'orange'
},
// 数组的形式绑定
styleArr:[
{
fontSize:'40px',
color:'blue'
},
{
backgroundColor:'gray'
}]
}
})
</script>
第三部分：v-if和v-show的使用（相同点与不同点）及v-if与template配合使用
<div id="root">
<!-- v-show具有调整default功能，根据判断语句(表达式:1===3 结果为false会隐藏)或者false或者true就会隐藏该内容(框架还在) -->
<!-- <h2 v-show="true">欢迎来到{{name}}</h2> -->
<!-- 使用v-if做条件渲染 若是false就会将解构包括内容全部隐藏-->
<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
<!-- 案例 -->
<h2>当前n的值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- <div v-show="n == 1">Angular</div>
<div v-show="n == 2">React</div>
<div v-show="n == 3">Vue</div>
<div v-show="n == 4">link</div> -->
<!-- v-show和v-if都能实现点击累加切换内容显示效果
对于使用谁，频率高的使用v-show 频率低的使用v-if-->
<!-- <div v-if="n == 1">Angular</div>
<div v-if="n == 2">React</div>
<div v-if="n == 3">Vue</div>
<div v-if="n == 4">link</div> -->
<!-- v-if-else-if -->
<!-- <div v-if="n == 1">Angular</div>
<div v-else-if="n == 2">React</div>
<div v-else-if="n == 3">Vue</div>
<div v-else-if="n == 4">link</div>
<div v-else>哈哈哈</div> -->
<!-- v-else可以不用写判断，因为加与不加结果是一样的 -->
<!-- 使用v-if-else-if效果会更高一些 比如两个判断的结果连续相同 单独v-if就会全部执行出来，而
v-if-else-if就不会，只会执行第一个，第一个执行了后面的就不执行了-->
<!-- 案例如下：想通过判断结果会同时出现-->
<!-- <div v-if="n == 1">Angular</div>
<div v-if="n == 1">React</div>
<div v-if="n == 3">Vue</div>
<div v-if="n == 4">link</div> -->
<!-- 注意：v-if必须在v-else-if前面使用，且不能打断，必须连续 -->
<!-- v-if和template配合使用 -->
<!-- 案例:若要点击一次显示所有的内容，且不能破坏包裹内部的结构的情况下使用template标签，在未使用前他是存在的，等使用完之后了，那么就失效了会把template
内部的内容全部给移除，不会破坏包裹内部的结构，同时在控制台中看不到template标签内容 但包裹的内容还是存在的-->
<!-- 该template有且只能配合v-if使用，其它的如：v-show都不可以使用 -->
<!-- <template v-if="n==1">
<h2>你好呀</h2>
<h2>你好呀</h2>
<h2>你好呀</h2>
</template> -->
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'北京',
n:0
}
})
</script>
第四部分：数组，对象，字符串，指定次数的遍历
<!-- v-for指令
1，用于展示列表数据
2，语法：v-for="(item,index) in xxx" :key="yyy"
3,可遍历：数组、对象、字符串(用的很少)、指定次数(用的很少) -->
<!-- 准备好一个容器 -->
<h1>人员列表</h1>
<div id="root">
<ul>
<!-- 遍历数组 -->
<!-- p是形参 -->
<!-- 准备好一个容器 -->
<!-- :key="p.id" 必须要在前加:否则不能生成动态的获取p.id内部的id值 :key类似于身份证号具有唯一性-->
<!-- 若是要获取多个值，那就需要包裹一个(p.index)，第一个是数据内容，第二个是数据的编号index 遍历 -->
<!-- <li v-for="p in persons" :key="p.id">-->
<!-- 选择需要哪些项 -->
<!--{{p.name}}-{{p.age}}-->
<!-- 若是全部需要那么直接写{{p}}即可 -->
<!--</li> -->
<!-- 若是要获取多个值，那就需要包裹一个(p.index)，第一个是数据内容，第二个是数据的编号index 遍历 -->
<!-- <li v-for="p in persons" :key="p.id">-->
<!-- 选择需要哪些项 -->
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<ul>
<h2>汽车信息</h2>
<li v-for="(value,k) of call" :key="k">
{{k}}-{{value}}
<!-- k是名称变量,value是值 -->
</li>
</ul>
<!-- 遍历字符串 用的很少-->
<ul>
<h2>测试遍历字符串</h2>
<!-- char是值，index是遍历下标 -->
<li v-for="(char,index) of str" :key="index">
{{a}}-{{b}}
</li>
</ul>
<!-- 遍历指定次数 用的极少-->
<ul>
<h2>测试遍历指定次数</h2>
<!-- char是值，index是遍历下标 -->
<li v-for="(a,b) of 5">
{{a}}-{{b}}
</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
call:{
// name:'周锷',age:23,
// name:'李留',age:25,
// name:'王琦',age:18
name:'奥迪A8',
price:'70万',
color:'黑色'
},
str:'hello you'
}
})
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
