概述
Time: 20190911
v-if + v-else配合使用
在HTML模板中引入控制逻辑，使得编写前端代码更加灵活。
<!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="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 -->
</head>
<body>
<div id="app">
<p v-if="hours < 12">早上好！</p>
<p v-if="hours >= 12 && hours < 18">中午好！</p>
<p v-if="hours >= 18">下午好！</p>
<p>Hello {{ greetee }} !</p>
<p v-if="path==='/">处于首页</p>
<p v-else>正处于{{ path }}</p>
</div>
<script>
var app = new Vue(
{
el: '#app',
data: {
hours: new Date().getHours(),
greetee: 'world',
path: location.pathname,
},
}
)
</script>
</body>
</html>
v-if和v-else出现在相邻的位置上。
v-if和v-show
简单来说，v-if指令判断结果为False，则不会显示DOM元素，显示或者不显示的方式是插不插入真实的DOM元素。
而v-show则是通过CSS样式来控制元素的显示和隐藏。
<div v-if="true">one</div>
<div v-if="false">two</div>
⇒ 输出：<div>one<div>
<div v-show="true">one</div>
<div v-show="false">two</div>
⇒ 输出：
<div>one<div>
<div style="display: none">two<div>
更直白一点说就是，没经过v-if判断的，都没有机会生成HTML代码，没经过v-show判断的，代码还是会生成的，甚至生成的还更复杂，带上了CSS样式控制。
现实使用时，用v-if更加，因为有些情况下，用的元素判断，该元素不存在，不生成HTML比较好，但用v-show会去访问不存在元素的属性，就会报Bug。
但是v-if的开销比v-show要大，因为它会频繁操作DOM树。
尤其是在频繁切换显示的场景下，用v-show更好。
模板循环：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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 -->
</head>
<body>
<div id="app">
<ul>
<li v-for="dog in dogs">{{ dog }}</li>
</ul>
</div>
<script>
var app = new Vue(
{
el: '#app',
data: {
dogs: [
'Rex', 'Rover', 'Henrietta', 'Alan'
]
},
created() {
// 应用启动时执行
console.log("应用启动...")
}
}
)
</script>
</body>
</html>
遍历数组显示效果
下面是遍历对象的写法：
<!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="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 -->
</head>
<body>
<div id="app">
<ul>
<li v-for="(rent, city) in avgRent">{{ city }}的平均租金为{{ rent }}</li>
</ul>
</div>
<script>
var app = new Vue(
{
el: '#app',
data: {
avgRent: {
London: '$1650',
Paris: '$730',
NYC: '$3680'
}
},
created() {
// 应用启动时执行
console.log("应用启动...")
}
}
)
</script>
</body>
</html>
显示效果：
属性绑定：v-bind
v-bind的作用是，将一个值绑定到HTML属性上。
比如：
<body>
<div id="app">
<button v-bind:type="buttonType">Test Button</button>
</div>
<script>
var app = new Vue(
{
el: '#app',
data: {
buttonType: 'submit'
},
created() {
// 应用启动时执行
console.log("应用启动...")
}
}
)
</script>
</body>
这段代码里，v-bind是指令的名称，type是指令的参数，在本例中是属性的名称，将给定的变量绑定到这个属性即可，buttonType是在data中定义的变量。
不仅是type，还可以绑定到disabled, checked等属性名称上。
这种是完整的写法，由于数据绑定是非常普遍的操作，Vue提供了简写法，只需要在参数前面加冒号即可。
<button :type="buttonType">Test Button with no v-vind </button>
效果是一样的。
两种写法取一种即可，保持代码风格的统一很重要。
END.
最后
以上就是活力机器猫为你收集整理的Vue之v-if, v-else, v-show, v-for, v-bind的全部内容，希望文章能够帮你解决Vue之v-if, v-else, v-show, v-for, v-bind所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复