vue.js为两个最为常用的指令提供了特别的缩写：
//全称
<a v-bind:href="url"></a>
//缩写
<a :href="url"></a>v-on缩写
//全称
<a v-on:click="doSomething"></a>
//缩写
<a @click="doSonthing"></a>条件判断
条件判断使用v-if指令，指令的表达式返回true时才会显示.
由于v-if是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在<template>元素上，并在上面使用v-if。最终的渲染结果将不包含<template>元素。
<!--
* @Author: [email protected]
* @Date: 2023-03-27 14:37:59
* @LastEditors: Mei
* @LastEditTime: 2023-03-27 14:41:29
* @FilePath: \vscode\v-if.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="mez">
<template v-if="seen">
<h1>这是一个段落标题</h1>
<p>正文1</p>
<p>正文2</p>
<p>正文3</p>
</template>
</div>
<script>
const change={
data(){
return{
seen:true
}
}
}
Vue.createApp(change).mount('#mez')
</script>
</body>
</html>
v-else
可以用v-else指令给v-if添加一个"else"块:
我们还使用这个例子来玩一玩
<!--
* @Author: [email protected]
* @Date: 2023-03-27 14:37:59
* @LastEditors: Mei
* @LastEditTime: 2023-03-27 14:46:02
* @FilePath: \vscode\v-if.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="mez">
<template v-if="seen">
<h1>这是一个段落标题</h1>
<p>正文1</p>
<p>正文2</p>
<p>正文3</p>
</template>
<template v-else>
<h1>this is a title</h1>
<p>contex1</p>
<p>context2</p>
<p>context3</p>
</template>
</div>
<script>
const change={
data(){
return{
seen:false
}
}
}
Vue.createApp(change).mount('#mez')
</script>
</body>
</html>在seen处等于false，所以就显示了下面一个template的内容
编程这玩意就是要试着举一反三，同样的例子，我们再来看v-else-if,感觉和js或大部分的编程语言类似，只是前面多了v-而已。
<!--
* @Author: [email protected]
* @Date: 2023-03-27 14:37:59
* @LastEditors: Mei
* @LastEditTime: 2023-03-27 14:52:01
* @FilePath: \vscode\v-if.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="mez">
<template v-if="seen">
<h1>这是一个段落标题</h1>
<p>正文1</p>
<p>正文2</p>
<p>正文3</p>
</template>
<template v-else-if="seen2">
<h1>this is a title</h1>
<p>contex1</p>
<p>context2</p>
<p>context3</p>
</template>
<template v-else-if="seen3">
<h1>1111</h1>
<p>c2222</p>
<p>3333</p>
<p>4444</p>
</template>
<template v-else>
<h1>赵云</h1>
<p>子龙</p>
<p>翼德</p>
<p>孟德</p>
</template>
</div>
<script>
const change={
data(){
return{
seen:false
}
}
}
Vue.createApp(change).mount('#mez')
</script>
</body>
</html>
例子都不再换的，中间又添加了v-else-if项而已，这里只是seen不满足的情况，也就是不会有seen2,seen3.那我们来把对应的seen2或seen3设置为TRUE，那么其他的都是false喽。
OK，完美！和我想象的一样。注意：当我们使用v-else时，都是放在最后一项用的，不要弄错v-else和v-else-if的顺序。
控制显示或不显示还有一个就是v-show：
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
<script>
const app = {
data() {
return {
ok: false
}
}
}
Vue.createApp(app).mount('#app')