当前位置：首页 > news >正文

文本插值，属性绑定，条件渲染，列表渲染

news 2025/11/11 8:27:45

vue

文本插值

必须是单一表达式，每次绑定必须要是一个能够被求出一个值的JavaScript代码，或者主要看是否可以写在return后面

<template>
<h3>你在学什么？</h3>
<p> {{ message }} </p>  
<p>{{ num+1 }}</p>
<p>{{ ok?'yes':'no' }}</p>
<p> {{ msg }} </p><!--字符串反转，字符串反转-->
<p>{{ msg.split('').reverse().join('') }}</p> <!--用逗号分隔，反转，再空字符连接-->
<p>{{ msg.split(',').reverse().join('') }}</p>  <!--字符串用逗号分隔，反转，用逗号连接-->
<p>{{ msg.split(',').reverse().join(',') }}</p><!--插入一个百度网页入口-->
<p v-html="rawHtml"></p></template><script>
export default{data(){return{message: 'Hello Vue!',msg:"你好,我的世界",num:10,ok:true,rawHtml:'<a href="https://www.baidu.com" >百度网页入口</a>'}}
}
</script>

输出结果：
在这里插入图片描述

属性绑定(v-bind)

<template>
<div v-bind:id="dynamicID" v-bind:class="dynamicClass">属性绑定</div>
<button :disabled="isButtonDisabled">按钮(button)</button>
<div v-bind="objectofAttrs">一个绑定多个属性</div>
</template><script>
export default {data(){return {dynamicID: 'ikun',dynamicClass: 'idols',isButtonDisabled: false,   objectofAttrs: {title: '我是一个div',content: '属性绑定示例'}}}
}
</script><style>
.idols {color: red;font-size: 30px;
}  
</style>

输出结果：
在这里插入图片描述

渲染

条件渲染

v-if

用于渲染一块内容，这块内容只会在表达式返回“真”值时才会被渲染出来

<template>
<h3>条件渲染</h3>
<div v-if="flag">当flag为真的时候才会显示</div>
<div v-if="tit">当tit为假的时候我不会显示</div>
</template>
<script>
export default{data(){return{flag:true,tit:false}}
}
</script>

输出结果：
在这里插入图片描述

v-else

<template>
<h3>条件渲染</h3>
<div v-if="flag">当flag为真的时候才会显示</div>
<div v-else="flag">当flag为假的时候我才会显示</div>
</template>
<script>
export default{data(){return{flag:false}}
}
</script>

输出结果：
在这里插入图片描述

v-else-if

<template>
<h3>条件渲染</h3>
<div v-if="type===A">A</div>
<div v-else-if="type===B">B</div>
<div v-else>不是A也不是B</div>
</template>
<script>
export default{data(){return{flag:false,type:'s'}}
}
</script>

输出结果：
在这里插入图片描述

if-show

v-show，如果条件是false的话，他会在后台程序种渲染出来，后台能看见。
v-if，如果条件是false的话，他根本不会在后台程序种渲染出来，后台看不见。

<template>
<h3>条件渲染</h3>
<div v-show="flag">当flag为真的时候才会显示</div>
<div v-show="tit">当tit为假的时候我不会显示</div>
</template>
<script>
export default{data(){return{flag:true,tit:false}}
}
</script>

输出结果：
在这里插入图片描述

列表渲染(v-for)

<template>
<h3>列表渲染</h3>
<div v-for="item in names">{{ item }}战队</div>
<div v-for="person in people"><p>{{person.name}}</p><p>{{person.age}}</p><p>{{person.team}}</p>
</div>
<div v-for="(value,key,index) in TheShy">{{ key }}-{{ value }}-{{ index }}</div>
</template><script>
export default{data(){return{names:['ig','tes','rng','edg'],people:[{   name:'theShy',age:23,team:'ig'},{   name:'Knight',age:22,team:'tes'},{   name:'Xiaohu',age:21,team:'rng'},{   name:'Flandre',age:20,team:'edg'}],TheShy:{name:'姜承録',age:23,team:'ig'}}}
}
</script>