3.10 v-text和v-html
更新 DOM 对象的 innerText / innerHTML
语法:
v-text="vue数据变量"
v-html="vue数据变量"
注意: 会覆盖插值表达式
v-text 把值当成普通字符串显示
v-html 把值当做 html 解析
<template>
<div>
<p v-text="str"></p>
<p v-html="str"></p>
<!-- 注意: v-text或v-html会覆盖插值表达式 -->
</div>
</template>
<script>
export default {
data() {
return {
str: "<span>我是一个span标签</span>"
}
}
}
</script>3.11 v-show和v-if
控制标签的隐藏或出现
v-if:指令用于条件性地渲染一块内容。
这块内容只会在指令的表达式返回 true 值的时候被渲染。
用法：
v-if :在
<template>元素上使用v-if条件渲染分组因为
v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含<template>元素。v-show：不同的是带有
v-show的元素始终会被渲染并保留在 DOM 中。v-show只是简单地切换元素的 CSS propertydisplay。注意，
v-show不支持<template>元素，也不支持v-else语法:
v-show="vue变量"
v-if="vue变量"
代码案例：
<template>
<div>
<div>
<p v-if="age >=18">我成年了，可以看电影</p>
<!-- <p v-if="age<=18">未成年禁止看电影</p> -->
<p v-else>还需要等几年</p>
</div>
</div>
</template>
<script>
export default {
data(){
return{
age: 15
};
}
}
</script>在 <template> 元素上使用 v-if 条件渲染分组
<template>
<div>
<div>
<p v-if="age >=18">我成年了，可以看电影</p>
<!-- <p v-if="age<=18">未成年禁止看电影</p> -->
<p v-else>还需要等几年</p>
<template v-if="age>=18">
<p>电影名字：{{videName}}</p>
<p>年龄：{{age}}</p>
<p>电影时常：{{time}}</p>
</template>
</div>
</div>
</template>
<script>
export default {
data(){
return{
age: 18,
videName:"超能人",
time:"1h20m"
};
}
}
</script>-
原理
-
v-show 用的display:none隐藏 (频繁切换使用)
-
v-if 直接从DOM树上移除
-
-
高级
-
v-else使用
-
v-show代码示例
<template>
<div>
<p v-show="sex=='man'">男生</p>
<p v-show="sex=='woman'">小女生</p>
</div>
</template>
<script>
export default {
data(){
return{
sex:"woman"
};
}
}
</script>v-if和v-show的区别：
<template>
<!--
带有v-show的元素始终会被渲染并保留在Dom中，主要作用 频繁切换页面状态的时候使用
v-if：对应false的时候，对应的元素和子元素都不会渲染，
v-if主要是控制dom元素的创建和销毁，运行时条件很少改变的元素，也就时一次性选择的那种
-->
<p v-if="isshow">v-if标题页面</p>
<p v-show="!isshow">v-show标题页面</p>
<button @click="isshow=!isshow">切换页面</button>
</template>
<script>
export default {
data(){
return{
isshow:"true"
};
}
}
</script>
原理
v-show 用的display:none隐藏 (频繁切换使用)
v-if 直接从DOM树上移除
综合示例：
<template>
<div>
<!-- v-show 或者 v-if
v-show="vue变量"
v-if="vue变量"
-->
<h1 v-show="isOk">v-show的盒子</h1>
<h1 v-if="isOk">v-if的盒子</h1>
<div>
<!--
v-show隐藏: 采用display:none // 频繁切换
v-if隐藏: 采用从DOM树直接移除 // 移除
-->
<p v-if="age > 18">我成年了</p>
<p v-else>还得多吃饭</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOk: true,
age: 15
}
}
}
</script>
使用v-show和v-if以及v-else指令, 方便通过变量控制一套标签出现/隐藏
案例编辑-折叠面板
此案例使用了less语法, 项目中下载模块
npm install less@4.1.2 less-loader@6.2.0 -D
或者
npm install less@4.1.2
npm install less-loader@6.2.0 -D
代码实现：
<template>
<div >
<div id="app01">
<h3>案例：折叠面板</h3>
<div>
<div class="title">
<h4>程序员之路</h4>
<!-- 1.绑定点击事件 -->
<span class="btn" @click="btn">
<!-- 4. 根据isShow的值显示不同文字 -->
{{ isShow ? '收起' : '展开'}}
</span>
</div>
<!-- 2. v-show配合变量来控制标签隐藏出现 -->
<div class="container" v-show="isShow">
<p>少时狂把编程想,</p>
<p>无畏赴身IT行。</p>
<p>纵使荣华未可近，</p>
<p>我自coding又何妨！</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
isShow:"true"
}
},
methods: {
btn(){
// 3. 点击时, 把值改成false
this.isShow=!this.isShow
}
}
}
</script>
<style lang="less">
body{
background-color: #CCC;
#app01 {
width: 400px;
margin: 20px auto;
background-color: #fff;
border: 4px solid blueviolet;
border-radius: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
padding: 1em 2em 2em;
h3 {
text-align: center;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 0 1em;
}
.title h4 {
line-height: 2;
margin: 0;
}
.container {
border: 1px solid #ccc;
padding: 0 1em;
}
.btn {
/* 鼠标改成手的形状 */
cursor: pointer;
}
}
}
</style>3.12 v-for
列表渲染, 所在标签结构, 按照数据数量, 循环生成
语法
v-for="(值, 索引) in 目标结构"
v-for="值 in 目标结构"
目标结构:
可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
注意:v-for的临时变量名不能用到v-for范围外
v-for入门程序：
<template>
<div >
<!--v-for 基本使用 v-for 指令需要使用 item in items 形式的特殊语法，
其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名-->
<ul>
<li v-for="item in person" :key="item">{{item}}</li>
</ul>
<!--获取下标的方式
v-for 还支持一个可选的第二个参数，即当前项的索引。
用法：（item , index）
-->
<ul>
<!-- <li v-for="(item,index) in person" :key="item">{{item}}--{{index}}</li> -->
<li v-for="(item,index) in person" :key="item">
{{parentMessage}}--{{item.message}}--{{index}}</li>
</ul>
<!--使用of 代替in-->
<ul>
<li v-for="(item,index) of person" :key="item">{{item.message}}--{{index}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
parentMessage:"parent",
//person:["佩奇","乔治","小猪"]
person:[{message:"佩奇"},{message:"乔治"},{message:"小猪"}]
}
}
}
</script>
在 v-for 里使用对象你也可以用 v-for 来遍历一个对象的 property。
<template>
<div >
<!--在v-for中使用对象,item 代表的是value值,key代表的是key健值-->
<ul>
<!-- <li v-for="item in personObj" :key="item">{{item}}</li> -->
<li v-for="(item,key) of personObj" :key="key">
{{key}}--{{item}}
</li>
</ul>
<!--用第三个参数作为索引-->
<ul>
<!-- <li v-for="item in personObj" :key="item">{{item}}</li> -->
<li v-for="(item,key,index) of personObj" :key="index">
{{key}}--{{index}}--{{item}}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
personObj:{
name:'佩奇',
age:'18',
sex:'女',
birthday:'2023-03-20'
}
}
}
}
</script>综合案例演示：
<template>
<div id="app">
<div id="app">
<!-- v-for 把一组数据, 渲染成一组DOM -->
<!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
<p>学生姓名</p>
<ul>
<li v-for="(item, index) in arr" :key="item">
{{ index }} - {{ item }}
</li>
</ul>
<p>学生详细信息</p>
<ul>
<li v-for="obj in stuArr" :key="obj.id">
<span>{{ obj.name }}</span>
<span>{{ obj.sex }}</span>
<span>{{ obj.hobby }}</span>
</li>
</ul>
<!-- v-for遍历对象(了解) -->
<p>老师信息</p>
<div v-for="(value, key) in tObj" :key="value">
{{ key }} -- {{ value }}
</div>
<!-- v-for遍历整数(了解) - 从1开始 -->
<p>序号</p>
<div v-for="i in count" :key="i">{{ i }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
arr: ["小明", "小欢欢", "大黄"],
stuArr: [
{
id: 1001,
name: "孙悟空",
sex: "男",
hobby: "吃桃子",
},
{
id: 1002,
name: "猪八戒",
sex: "男",
hobby: "背媳妇",
},
],
tObj: {
name: "小黑",
age: 18,
class: "1期",
},
count: 10,
};
},
};
</script>vue最常用指令, 铺设页面利器, 快速把数据赋予到相同的dom结构上循环生成
