Vue-条件判断与循环遍历

条件判断

v-if的使用

<div id="app"><h1 v-if="scope>20">{{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello',scope: 90}})
</script>

v-if、v-else if、v-else 的结合使用

<div id="app"><h2 v-if="scope>=80">优秀</h2><h2 v-else-if="scope>=60">及格</h2><h2 v-else>不及格</h2><h1>{{checkScope}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello',scope: 60},computed: {checkScope() {let result = '';if(this.scope >= 80){result = '优秀'}else if(this.scope >= 60){result = '及格'}else{result = '不及格'}return result}}})
</script>

用户登录切换的小案例

<div id="app"><!--  <label for="input1">{{message}}</label>--><!--  <input type="text" id="input1" :placeholder="message">--><!--  <button @click="change">点击切换</button>--><span v-if="input"><label  for="input">账号登录</label><input id="input" type="text" placeholder="请输入账号" key="abc"></span><span v-else><label  for="input1">手机号登录</label><input  id="input1" type="text" placeholder="请输入手机号" key="ab"></span><button @click="input = !input">点击切换</button>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '账号登录',input: true},methods: {change() {if (this.message === '账号登录') {this.message = '手机号登录'} else {this.message = '账号登录'}}}})
</script>

v-show的使用

<div id="app"><!--如果isShow为false，彻底没有--><h2 id="aaa" v-if="isShow">{{message}}</h2><!--如果isShow为false，则隐藏--><h2 id="bbb" v-show="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello',isShow: true}})
</script>

循环遍历

<div id="app"><!--遍历数组--><ul><li v-for="(item,index) in movies">{{index+1}}---{{item}}</li></ul><!--遍历对象--><ul><li v-for="(value,key,index) in obj">{{value}}----{{key}}----{{index}}</li></ul>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello',movies: ['深入计算机原理','java编程入门','web开发实战'],obj:{age: 12,name: '詹三',address: '北京'}}})
</script>

Vue-条件判断与循环遍历相关推荐

打开高效文本编辑之门_Linux Awk之条件判断与循环
Linux awk之条件判断与循环声明与简介 AWK 是一种处理文本文件的语言,是一个强大的文本分析工具.awk通常用来处理结构化(固定格式)的文本文件, awk每接收文件的一行,然后执行相应的命令 ...
怎样跳出Python条件语句继续判断下一个条件语句_Python条件判断、循环与迭代...
昨天学完了数据类型,那么今天学习什么鸭? 惨绿青年:今天来学习条件判断.循环和迭代吧. 条件判断惨绿青年:说条件判断之前,先给你说下前面的布尔值. 我:布尔值咋了,怎么又说它鸭? 惨绿青年:布尔值不 ...
笔记整理1----Java语言基础（一）01 变量与数据类型+02 运算符与表达式+03 条件判断与循环语句+04 JAVA数组+05 函数与方法
01 变量与数据类型+02 运算符与表达式+03 条件判断与循环语句+04 JAVA数组+05 函数与方法第01天 java基础知识今日内容介绍  Java概述.helloworld案例  工 ...
smali to java_Smali —— 数学运算，条件判断，循环
通过上一篇 Smali 语法解析--Hello World 的学习,了解了 Smali 文件的基本格式.这一篇从最基本的数学运算,条件判断,循环等开始,更加详细的了解 Smali 语法. 数学运算加 ...
Python时间序列模型推理预测实战：时序推理数据预处理（特征生成、lstm输入结构组织）、模型加载、模型预测结果保存、条件判断模型循环运行
Python时间序列模型推理预测实战:时序推理数据预处理(特征生成.lstm输入结构组织).模型加载.模型预测结果保存.条件判断模型循环运行目录
python重复元素判定编程_从零开始学Python编程四：条件判断与循环
前面已经介绍了不少Python基础知识,大家不要觉得不耐烦,想要学好Python,做好Python开发,一定要打牢基础.大家也发现了,Python中很多基础知识和数学算法是一样的,比如今天要教给大家的 ...
Sass学习笔记 -- 初步了解函数、运算、条件判断及循环
函数 sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始.sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以li ...
linux循环条件,shell脚本编写之条件选择，条件判断，循环语句
1 概述编写shell脚本,一般离不开条件选择,条件判断以及循环语句.掌握这三个语法,将大大提高脚本的编写效率,使得脚本编写更加灵活,完成X相对复杂的工作 2 条件选择if语句 if语句选择执行,逐 ...
python条件输出_python基础（二）条件判断、循环、格式化输出
继续上一篇,今天主要总结一下条件判断.循环.格式化输出一.条件判断 python中条件判断使用if else来判断,多分支的话使用if elif ... else,也就是如果怎么怎么样就怎么怎么样, ...
python指定条件分类输出_python基础（二）条件判断、循环、格式化输出
继续上一篇,今天主要总结一下条件判断.循环.格式化输出一.条件判断 python中条件判断使用if else来判断,多分支的话使用if elif ... else,也就是如果怎么怎么样就怎么怎么样, ...

Vue-条件判断与循环遍历

条件判断

循环遍历

Vue-条件判断与循环遍历相关推荐

最新文章

热门文章