VUE 条件指令语法

╰+哭是因爲堅強的太久メ 2022-04-22 15:42 173阅读 0赞

## v-if v-else v-else-if ##

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    </head>
    <body>
    	<div id="app">
    		<h1 v-if="isok">IsOK=true</h1>
    		<h1 v-else>IsOK=false</h1>
    		
    		<h3 v-if="code === 'A'">Code is A</h3>
    		<h3 v-else-if="code === 'B'">Code is B</h3>
    		<h3 v-else-if="code === 'C'">Code is C</h3>
    		<h3 v-else>Not ABC</h3>
    	</div>
    <script>
    
    var obj = {
    	isok:true,
    	code:'A'
    }
    var vm = new Vue({
      el: '#app',
      data: obj
    })
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]: /images/20220327/4b2846421e264cd389d6cd640b657661.png

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关 Freemarker基本指令语法和集合指令语法

Freemarker是一款模板引擎：即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。它不是面向最终用户的，而是一个J

古城微笑少年丶/ 2023年10月12日 19:44/ 0 赞/ 18 阅读

相关 vue模板语法: 插值语法和指令语法以及v-bind指令使用

准备工作首先新建一个页面，写好基本的代码 <!DOCTYPE html> <html> <head> <meta c

迷南。/ 2023年09月27日 09:54/ 0 赞/ 134 阅读

相关 vue.js 模板语法-指令 v-（七）

指令：指令是带有 v-前缀的 html标签特殊属性，指令特性的值是单个javascript表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响（即重新渲染视图

浅浅的花香味﹌/ 2023年02月22日 07:43/ 0 赞/ 2 阅读

相关 Vue指令语法

除了插值语法(解析标签体的内容)之外，还有指令语法(解析标签：包括标签属性，标签体内容，绑定事件等等)，这两者一起构成了Vue的模板语法 > 指令语法标签中的属性，

深碍√TFBOYSˉ_/ 2022年09月14日 08:42/ 0 赞/ 203 阅读

相关 Vue.js 学习(6) -- Vue指令之：条件渲染

本节的重点是几个Vue指令： v-if v-else v-else-if v-show 它们共同的特点，就是都会根据条件，对DOM元素进行渲

系统管理员/ 2022年06月15日 03:40/ 0 赞/ 189 阅读

相关 04vue_模板语法_指令

概念和常见指令指令 (Directives) 是带有 `v-` 前缀的特殊属性。即：vue给HTML元素增加了一些自定义属性，这些自定义是属性是以"v-"开头的属性

我就是我/ 2022年05月31日 10:28/ 0 赞/ 163 阅读

相关 Vue 条件渲染指令

和JavaScript的条件语句一样，vue的条件指令可以根据表达式的值在dom中渲染或者销毁元素/组件,常用的条件指令有： v-if v-else-if

爱被打了一巴掌/ 2022年05月19日 02:00/ 0 赞/ 262 阅读

相关 VUE 条件指令语法

v-if v-else v-else-if <!DOCTYPE html> <html> <head> <meta charset="UT

╰+哭是因爲堅強的太久メ/ 2022年04月22日 15:42/ 0 赞/ 174 阅读

相关 VUE 基础语法：属性、指令、数据绑定

vue基本语法 `el`绑定元素id； `data`数据，可以在绑定元素内使用； `{ { data中的key }}`Mustache语法，通过此方式绑定数据；

た入场券/ 2021年11月29日 07:26/ 0 赞/ 247 阅读

相关 Vue.js---指令与事件、语法糖

指令与事件指令（Directives）是Vue.js模板中最常用的一项功能，它带有前缀v-，指令的职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上。 v-

浅浅的花香味﹌/ 2021年08月13日 22:19/ 0 赞/ 391 阅读