01-02.Vue的常用指令(二)

01-02.Vue的常用指令(二)

  • 前言
    • v-model:双向数据绑定
    • v-model举例:实现简易计算器
    • Vue中通过属性绑定为元素设置class 类样式
      • 引入
      • 方式一:数组
      • 写法二:在数组中使用三元表达式
      • 写法三:在数组中使用 对象 来代替 三元表达式(提高代码的可读性)
    • Vue中通过属性绑定为元素设置 style 行内样式
      • 写法一
      • 写法二
      • 写法三
    • v-for:for循环的四种使用方式
      • 引入
      • 方式一:普通数组的遍历
      • 方式二:对象数组的遍历
      • 方式三:对象的遍历
      • 方式四:遍历数字
      • v-for中key的使用注意事项
    • v-if:设置元素的显示和隐藏(添加/删除DOM元素)
    • v-show:设置元素的显示和隐藏(在元素上添加/移除`style="display:none"`属性)
      • v-if和v-show的区别

前言

我们接着上一篇文章 01-01.Vue的插值表达式和常用指令(一) 来讲。


下一篇文章 01-03.Vue:v-on的事件修饰符

本文主要内容:

  • v-model

  • v-for

  • v-if

  • v-show

    v-model:双向数据绑定

重点:双向数据绑定,只能用于表单元素,或者用于自定义组件

之前的文章里,我们通过v-bind,给<input>标签绑定了data对象里的name属性。当data里的name的值发生改变时,<input>标签里的内容会自动更新。

可我现在要做的是:我在<input>标签里修改内容,要求data里的name的值自动更新。从而实现双向数据绑定。该怎么做呢?这就可以利用v-model这个属性。

区别

  • v-bind:只能实现数据的单向绑定,从 M 自动绑定到 V。

  • v-model:只有v-model才能实现双向数据绑定。注意,v-model 后面不需要跟冒号,

注意:v-model 只能运用在表单元素中,或者用于自定义组件。常见的表单元素包括:input(radio, text, address, email…) 、select、checkbox 、textarea。

代码举例如下:

<template><div><!-- 将 input 标签中的value值双向绑定到 Vue实例中的data。注意,v-model 后面不需要跟冒号 --><input type="text" id="username" v-model="myAccount.username" /><input type="password" id="pwd" v-model="myAccount.userpwd" /><input type="submit" v-on:click="submit1" value="注册" /></div>
</template><script>
export default {name: "HomeView",data() {return {name: "HydeLinjr",myAccount: {username: "",userpwd: "",},};},//在methods里绑定各种方法,根据业务需要进行操作methods: {submit1(){alert(this.myAccount.username + "  pwd=" + this.myAccount.userpwd);},},
};
</script>

此时,便可实现我们刚刚要求的双向数据绑定的效果。

v-model举例:实现简易计算器

题目:现在两个输入框,用来做加减乘除,将运算的结果放在第三个输入框。

实现代码如下:

  <template><div><input type="text" v-model="n1" /><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="n2" /><input type="button" value="=" @click="calc" /><input type="text" v-model="result" /></div></template><script>export default {name: "HomeView",data() {return {n1: 0,n2: 0,result: 0,opt: "+",};},//在methods里绑定各种方法,根据业务需要进行操作methods: {calc() {// 计算器算数的方法// 逻辑判断:switch (this.opt) {case "+":this.result = parseInt(this.n1) + parseInt(this.n2);break;case "-":this.result = parseInt(this.n1) - parseInt(this.n2);break;case "*":this.result = parseInt(this.n1) * parseInt(this.n2);break;case "/":this.result = parseInt(this.n1) / parseInt(this.n2);break;}//上面的逻辑判断,可能有点啰嗦,我们还可以采取下面的这种方式进行逻辑判断// 注意:这是投机取巧的方式,正式开发中,尽量少用// var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'// this.result = eval(codeStr)},},};</script>

注意上方代码中的注释,可以了解下eval()的用法。

Vue中通过属性绑定为元素设置class 类样式

注意,是类样式

引入

我们先来看下面这段代码:

<template><!--这个div区域就是MVVM中的 View--><div id="div1"><h1 class="my-red my-thin">我是海德小林,HydeLinjr</h1></div>
</template><script>
export default {
};
</script>
<style>
.my-red {color: red;
}.my-thin {/* 设置字体的粗细 */font-weight: 200;
}.my-italic {font-style: italic;
}.my-active {/* 设置字符之间的间距 */letter-spacing: 0.5em;
}
</style>

上面的代码中,我们直接通过正常的方式,给<h1>标签设置了两个 class 类的样式。代码抽取如下:

    <h1 class="my-red my-thin">我是海德小林,HydeLinjr</h1>

上面的效果,我们还可以用Vue来写。这就引入了本段要讲的方式。

方式一:数组

方式一:直接传递一个数组。注意:这里的 class 需要使用 v-bind 做数据绑定。

代码如下:

<template><!--这个div区域就是MVVM中的 View--><div id="div1"><h1 class="my-red my-thin">我是海德小林,HydeLinjr</h1><!-- vue的写法1:数组的形式 --><h1 :class="['my-red', 'my-thin']">我是海德小林,HydeLinjr</h1></div>
</template><script>
export default {};
</script>
<style>
.my-red {color: red;
}.my-thin {/* 设置字体的粗细 */font-weight: 200;
}.my-italic {font-style: italic;
}.my-active {/* 设置字符之间的间距 */letter-spacing: 0.5em;
}
</style>

代码抽取如下:

        <!-- vue的写法1:数组的形式 -->
<h1 :class="['my-red', 'my-thin']">我是海德小林,HydeLinjr</h1>

上方代码中,注意,数组里写的是字符串;如果不加单引号,就不是字符串了,而是变量。

演示效果如下:

14

写法二:在数组中使用三元表达式

<template><div><!-- vue的写法2:在数组中使用三元表达式。注意格式不要写错--><!-- 通过data中布尔值 flag 来判断:如果 flag 为 true,就给 h1 标签添加`my-active`样式;否则,就不设置样式。 --><h1 :class="[flag ? 'my-active' : '']">我是海德小林,HydeLinjr</h1></div>
</template><script>
export default {name: "HomeView",data() {return {flag: true,};},
};
</script>

上方代码的意思是,通过data中布尔值 flag 来判断:如果 flag 为 true,就给 h1 标签添加my-active样式;否则,就不设置样式。

注意,三元表达式的格式不要写错了。

写法三:在数组中使用 对象 来代替 三元表达式(提高代码的可读性)

上面的写法二,可读性较差。于是有了写法三。

写法三:在数组中使用对象来代替三元表达式

代码如下:

<template><div><!-- vue的写法3:在数组中使用对象来代替三元表达式。--><h1 :class="[ {'my-active':flag} ]">我是海德小林,HydeLinjr</h1></div>
</template><script>
export default {name: "HomeView",data() {return {flag: true,};},
};
</script>

Vue中通过属性绑定为元素设置 style 行内样式

注意,是行内样式(即内联样式)。

写法一

写法一:直接在元素上通过 :style 的形式,书写样式对象。

例如:

        <h1 :style="{color: 'red', 'font-size': '20px'}">我是海德小林,HydeLinjr</h1>

写法二

写法二:将样式对象,定义到 data 中,并直接引用到 :style 中。

也就是说,把写法一的代码改进一下。代码如下:

<template><div><h1 :style="styleObj">我是海德小林,HydeLinjr</h1></div>
</template><script>
export default {name: "HomeView",data() {return {styleObj: { color: 'red', 'font-size': '20px' }};},
};
</script>

写法三

写法二只用到了一组样式。如果想定义多组样式,可以用写法三。

写法三:在 :style 中通过数组,引用多个 data 上的样式对象。

代码如下:

<template><div><h1 :style="[styleObj1, styleObj2]">我是海德小林,HydeLinjr</h1></div>
</template><script>
export default {name: "HomeView",data() {return {styleObj1: { color: "red", "font-size": "20px" },styleObj2: { "font-style": "italic" },};},
};
</script>

v-for:for循环的四种使用方式

作用:根据数组中的元素遍历指定模板内容生成内容。

引入

比如说,如果我想给一个ul中的多个li分别赋值1、2、3…。如果不用循环,就要挨个赋值:

<template><div><ul><li>{{list[0]}}</li><li>{{list[1]}}</li><li>{{list[2]}}</li></ul></div>
</template><script>
export default {name: "HomeView",data() {return {list: [1, 2, 3]};},
};
</script>

效果:

为了实现上面的效果,如果我用v-for进行赋值,代码就简洁很多了:

<template><div><ul><!-- 使用v-for对多个li进行遍历赋值 --><li v-for="item in list" :key="item">{{ item }}</li></ul></div>
</template><script>
export default {name: "HomeView",data() {return {list: [1, 2, 3],};},
};
</script>

接下来,我们详细讲一下v-for的用法。需要声明的是,Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法。

方式一:普通数组的遍历

针对下面这样的数组:

<script>new Vue({el: '#app',data: {arr1: [2, 5, 3, 1, 1],}});
</script>

将数组中的赋给li:

      <li v-for="item in arr1" :key="item">{{item}}</li>

将数组中的值和index赋给li:

      <!-- 括号里如果写两个参数:第一个参数代表值,第二个参数代表index 索引 --><li v-for="(item,index) in arr1" :key="index">值:{{item}} --- 索引:{{index}}</li>

效果如下:

方式二:对象数组的遍历

<template><div><ul><!-- 对象数组的遍历。括号里如果写两个参数:第一个参数代表数组的单个item,第二个参数代表 index 索引--><li v-for="(item, index) in dataList" :key="index">姓名:{{ item.name }} --- 年龄:{{ item.age }} --- 索引:{{ index }}</li></ul></div>
</template><script>
export default {name: "HomeView",data() {return {//对象数组dataList: [{ name: "zhangsan", age: "26" },{ name: "lisi", age: "32" },{ name: "wangwu", age: "20" },],};},
};
</script>

效果如下:

方式三:对象的遍历

针对下面这样的对象:

<script>
export default {name: "HomeView",data() {return {obj1: {name: "hydelinjr",age: "26",gender: "男",},};},
};
</script>

将上面的obj1对象的数据赋值给li,写法如下:

<template><div><ul><!-- 括号里如果写两个参数:则第一个参数代表value,第二个参数代表key --><li v-for="(value,key) in obj1" :key="key">值:{{value}} --- 键:{{key}} </li><h3>---分隔线---</h3><!-- 括号里如果写三个参数:则第一个参数代表value,第二个参数代表key,第三个参数代表index --><li v-for="(value,key,index) in obj1" :key="index">值:{{value}} --- 键:{{key}} --- index:{{index}} </li></ul></div>
</template>

效果如下:

方式四:遍历数字

in后面还可以直接放数字。举例如下:

        <ul><!-- 对象数组的遍历 --><!-- 注意:如果使用 v-for 遍历数字的话,前面的 myCount 值从 1 开始算起 --><li v-for="myCount in 10">这是第 {{myCount}}次循环</li></ul>

效果如下:

v-for中key的使用注意事项

注意:在 Vue 2.2.0+ 版本里,当在组件中使用 v-for 时,key 属性是必须要加上的。

这样做是因为:每次 for 循环的时候,通过指定 key 来标示当前循环这一项的唯一身份

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。

key的类型只能是:string/number,而且要通过 v-bind 来指定。

代码举例:

<template><div><div><label>Id:<input type="text" v-model="id" /></label><label>Name:<input type="text" v-model="name" /></label><input type="button" value="添加" @click="add" /></div><!-- 注意: v-for 循环的时候,key 属性只能使用 number 或者 string --><!-- 注意: key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值 --><!-- 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果 v-for 有问题,必须 在使用 v-for 的同时,指定 唯一的 字符串/数字 类型 :key 值 --><p v-for="item in list" :key="item.id"><input type="checkbox" />{{ item.id }} --- {{ item.name }}</p></div>
</template><script>
export default {name: "HomeView",data() {return {id: "",name: "",list: [{ id: 1, name: "hyde" },{ id: 2, name: "lin" },{ id: 3, name: "hydelinjr" },{ id: 4, name: "Hydelinjr" },{ id: 5, name: "HydeLinjr" },],};},methods: {add() {// 添加方法this.list.unshift({ id: this.id, name: this.name });},},
};
</script>

v-if:设置元素的显示和隐藏(添加/删除DOM元素)

作用:根据表达式的值的真假条件,来决定是否渲染元素,如果为false则不渲染(达到隐藏元素的目的),如果为true则渲染。

在切换时,元素和它的数据绑定会被销毁并重建。

举例如下:(点击按钮时,切换和隐藏盒子)

<template><div><button v-on:click="toggle">显示/隐藏</button><div v-if="isShow">我是盒子</div></div>
</template><script>
export default {name: "HomeView",data() {return {isShow: true,};},methods: {toggle: function () {this.isShow = !this.isShow;},},
};
</script>

效果如下:

v-show:设置元素的显示和隐藏(在元素上添加/移除style="display:none"属性)

作用:根据表达式的真假条件,来切换元素的 display 属性。如果为false,则在元素上添加 display:none属性;否则移除display:none属性。

举例如下:(点击按钮时,切换和隐藏盒子)

我们直接把上一段代码中的v-if改成v-show就可以了:

<template><div><button v-on:click="toggle">显示/隐藏</button><div v-show="isShow">我是盒子</div></div>
</template><script>
export default {name: "HomeView",data() {return {isShow: true,};},methods: {toggle: function () {this.isShow = !this.isShow;},},
};
</script>

效果如下:

v-if和v-show的区别

v-ifv-show都能够实现对一个元素的隐藏和显示操作。

区别:

  • v-if:每次都会重新添加/删除DOM元素,元素和它的数据绑定会被销毁并重建。

  • v-show:每次不会重新进行DOM的添加/删除操作,只是在这个元素上添加/移除style="display:none"属性,表示节点的显示和隐藏。

优缺点:

  • v-if:有较高的切换性能消耗。这个很好理解,毕竟每次都要进行dom的添加/删除操作。

  • v-show:有较高的初始渲染消耗。也就是说,即使一开始v-show="false",该节点也会被创建,只是隐藏起来了。而v-if="false"的节点,根本就不会被创建。

总结

  • 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show

  • 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/15541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【全部更新完毕】2024电工杯B题详细思路代码成品文章教学:大学生平衡膳食食谱的优化设计及评价

大学生平衡膳食食谱的优化设计及评价 摘要 大学阶段是学生获取知识和身体发育的关键时期&#xff0c;也是形成良好饮食习惯的重要阶段。然而&#xff0c;当前大学生中存在饮食结构不合理和不良饮食习惯的问题&#xff0c;主要表现为不吃早餐或早餐吃得马虎&#xff0c;经常食用…

CentOS 常见命令详解

CentOS 是一种基于 Red Hat Enterprise Linux (RHEL) 的免费开源操作系统&#xff0c;以其稳定性和高效性广泛应用于服务器和企业环境中。对于系统管理员和开发人员来说&#xff0c;掌握 CentOS 的常见命令是日常工作中的必备技能。本文将详细介绍一些在 CentOS 上常用的命令&a…

算法提高之谜一样的牛

算法提高之谜一样的牛 核心思想&#xff1a;树状数组 初始化树状数组为1 表示所有高度都没有用过从后往前遍历h数组 分析身高 取当前h&#xff0c;即前面有h个比它高的 所以它是第h1个数求当前身高中 第h1个数 用二分mid求sum找到第k个数当前身高用过之后减1 #include <i…

高通Android 12/13冻结应用

最近开发SDK遇到冻结应用需求&#xff0c;于是简单记录下。总体而言比较简单&#xff0c;调用系统接口实现此功能。 涉及类与方法 IPackageManager .aidl # * As per {link android.content.pm.PackageManager#setApplicationEnabledSetting}.*/UnsupportedAppUsagevoid setA…

宝塔面板修改端口后无法登入

今天通过宝塔面板登录腾讯云主机&#xff0c;看到下面的提醒&#xff0c;顺便点进去随便改了个端口 本以为改端口是很简单事情&#xff0c;结果我改完之后面板立马登不上了&#xff0c;接下来我改了登录地址和端口也不行&#xff0c;我以为是防火墙的问题&#xff0c;增加了防火…

SpringBoot基于函数替换的热重载

背景 SpringBoot项目每次启动都很慢&#xff0c;有时候调试仅仅是改一点点东西&#xff0c;就要重启工作效率太低&#xff0c;希望能修改完代码&#xff0c;执行快捷键后就把该类的修改生效。&#xff08;仅限于Bean的修改生效&#xff09; 原理 SpringBoot的逻辑基本都是集…

ViT:1 从DETR说起

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调重新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则提供了大模型领域最新技…

Pycharm在下载安装第三方库时速度慢或超时问题 / 切换国内镜像地址

pycharm下载第三方库速度极慢&#xff0c;搜索了一下&#xff0c;发现方法非常乱&#xff0c;稍作整理。这个问题一般都会出现&#xff0c;在我们开发中遇到的常见问题&#xff0c;根据以下解决方法&#xff0c;基本可以解决&#xff0c;但是不能100%保证 Installing packages …

打造一个增强版Kimi:可以生成图片、PPT、PDF文档、数据分析等

Kimi虽然在国内AI大模型中表现不错&#xff0c;但是和ChatGPT还是差不少功能。现在有一个很简单的方法&#xff0c;把kimi功能增强&#xff0c;使用效果大大改善&#xff0c;比如生成图片&#xff1a; 具体方法如下&#xff1a; 打开coze网站&#xff1a;https://www.coze.cn/…

Elementui里使用el-date-picker来选取指定时间段(时间段不超过31天)

需求描述&#xff1a; 1.禁止选择当前日期之后的所有日期2.选择的时间范围小于等于31天&#xff0c;其他日期禁用<el-date-picker v-model"historySubmitModel.historyDateTime" type"daterange" range-separator"- " start-placeholder"…

鸿蒙应用开发系列 篇四:鸿蒙系统应用开发基础

文章目录 系列文章概述ArkTS应用(Stage模型)示例应用示例代码使用模拟器运行应用使用真机运行应用应用程序包共享包应用配置文件(Stage模型)资源目录示例系列文章 鸿蒙应用开发系列 篇一:鸿蒙系统概述 鸿蒙应用开发系列 篇二:鸿蒙系统开发工具与环境

【c++基础】昆虫繁殖

说明 科学家在热带森林中发现了一种特殊的昆虫&#xff0c;这种昆虫的繁殖能力很强。每对成虫每过x个月产y对卵&#xff0c;每对卵要过两个月长成成虫。假设每个成虫不死&#xff0c;第一个月只有一对成虫&#xff0c;且卵长成成虫后的第一个月不产卵(过X个月产卵)&#xff0c…

C++容器之位集(std::bitset)

目录 1 概述2 使用实例3 接口使用3.1 constructor3.2 count_and_size3.3 test3.4 any3.5 none3.6 all3.7 set3.8 reset3.9 filp3.10 to_string3.11 to_ulong3.12 to_ullong3.13 operators1 概述 位集存储位(只有两个可能值的元素:0或1,true或false,…)。   该类模拟bool…

推荐一款自助分析的财务分析软件:奥威BI软件

奥威BI软件是一款支持多维度动态自助分析的软件&#xff0c;预设了智能财务分析方案&#xff0c;提供内存行列计算模型解决财务指标计算难题&#xff0c;界面简洁&#xff0c;以点击、拖曳操作为主&#xff0c;十分适合没有IT背景的财务人做财务分析。因此也经常有人说奥威BI软…

Spark搭建 Standalone模式详细步骤

Standalone模式概述&#xff1a; Standalone模式是Spark自带的一种集群模式&#xff08;本地集群&#xff0c;不依赖与外部集群&#xff0c;比如Yarn&#xff09;&#xff0c;可以真实地在多个机器之间搭建Spark集群的环境。 Standalone是完整的Spark运行环境,其中: Master角…

OpenFeign微服务调用组件使用

前言&#xff1a;OpenFeign是可以跨服务、跨进程的调用方式。 什么是Feign Feign是Netflix开发的声明式、模版化的HTTP客户端。 优势: Feign可以做到使用 HTTP 请求远程服务时就像调用本地方法一样的体验&#xff0c;开发者完全感知不到这是远程方法&#xff0c;更感知不到这…

【TB作品】stm32单片机读取DS2401程序

DS2401是由Analog Devices公司生产的一种硅序列号芯片&#xff0c;它提供了一个绝对唯一的64位ROM识别码&#xff0c;用于确保可追溯性。以下是对DS2401器件的分析&#xff1a; 特点和优势&#xff1a; 唯一性&#xff1a;每个DS2401芯片都有一个独一无二的64位注册码&#x…

PointPillars, CenterPoint,和TransFusion

PointPillars, CenterPoint, and TransFusion These models are primarily used for 3D object detection in autonomous driving. Here is a brief introduction to PointPillars, CenterPoint, and TransFusion: PointPillars 领域&#xff1a;计算机视觉&#xff0c;自动…

[less配置]vue2引入less

1、终端输入&#xff1a;npm install less less-loader --save-dev 2、在package.json查看是否安装less依赖 3、调用

vue2快速安装环境,从0-1创建vue2项目教程

vue2快速安装环境&#xff0c;从0-1创建vue2项目教程(windows) 一、node下载 1.如何查看node版本和npm版本 二、npm安装脚手架 1.注意事项 三、vue2选项解读 四、运行脚手架 一、node下载 1、(node.js中文网) 下载长期稳定版本就行 解释下node.js和npm的关系? 想象你在…