v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<h1>v-if条件</h1>
<button v-on:click="error = !error">toggle Error</button>
<button v-on:click="success = !success">toggle Success</button>
<!-- <p v-if="error">网络连接错误： 404</p>
<p v-else-if="success">网络连接成功： 200</p> -->
<p v-show="error">404</p>
<p v-show="success">200</p>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>app.js
new Vue({
el: '#app',
data: {
error: false,
success: false
},
methods: {
},
computed: {
}
});Vue系列文章目录
- vue系列文章（1）：对象绑定，属性绑定
- Vue系列文章（2）事件绑定，鼠标点击事件
- vue系列文章（3）：事件修饰符
- Vue系列文章（4）键盘事件及键盘修饰符
- vue系列文章（5）双向数据绑定
- vue系列文章（6）计算属性computed
- vue系列文章（7）动态CSS类型绑定
- vue系列文章（8）条件渲染
- vue系列文章（9）v-for条件循环
- vue系列文章（10）vue实战项目demo
- vue系列文章(11)：初始化多个实例对象
- vue系列文章（12）初始组件的应用
- Vue系列文章（13）vue cli脚手架
- vue系列文章（14）vue-cli脚手架，组件嵌套，全局组件注册和局部组件注册
- vue系列文章（15）属性传值props
- vue系列文章（16）传值和传引用的类型和区别
- vue系列文章（17）利用事件传递将子组件值传递给父组件
- vue系列文章（18）vue生命周期
- vue系列文章（19）vue路由配置
- vue系列文章（20） vue网络请求vue-resource
如果上面文章对你有用，打赏下我吧@*@
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
