vue系统指令二

embedded/2024/10/18 16:48:31/

vue系统指令二

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。

代码举例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.father {height: 300px;width: 300px;background: pink;}.child {width: 200px;height: 200px;background: green;}</style></head><body><div id="test"><form v-bind:action="url" ><input type="text" v-bind:value="url" ><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="submit1"></form></div><script>var vm = new Vue({el: '#test',data: {url: "http://www.baidu.com",name: "dany",myAccount: {userName: "wenqun", "pwd": 123456}},methods: {submit1: function () {alert(this.myAccount.userName + "  pwd=" + this.myAccount.pwd);}}})</script></body></html>

v-model实现计算器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.father {height: 300px;width: 300px;background: pink;}.child {width: 200px;height: 200px;background: green;}</style></head><body><div id="test"><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><script>var vm = new Vue({el: '#test',data: {n1: 0,n2: 0,result: 0,opt: "+"},methods: {// calc: function () {//     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;//     }// }calc(){this.result = eval( 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)');}}})</script></body></html>

v-bind 绑定属性

设置CSS样式

传统我们给元素添加样式的方式如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.my-red {color: red;}.my-thin {/* 设置字体的粗细 */font-weight: 200;}.my-italic {font-style: italic;}.my-active {/* 设置字符之间的间距 */letter-spacing: 0.5em;}</style>
</head><body><h1 class="my-red my-thin">我是千古壹号，qianguyihao</h1>
</body></html>

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

方式1： 数组

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="vue2.5.16.js"></script><style>.my-red {color: red;}.my-thin {/* 设置字体的粗细 */font-weight: 200;}.my-italic {font-style: italic;}.my-active {/* 设置字符之间的间距 */letter-spacing: 0.5em;}</style>
</head><body><div id="app"><!-- 普通写法 --><h1 class="my-red my-thin">我是千古壹号，qianguyihao</h1><!-- vue的写法1：数组的形式 --><h1 :class="['my-red', 'my-thin']">我是qianguyihao，千古壹号</h1></div><script>var vm = new Vue({el: '#app'});</script>
</body></html>

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

方式2： 三元表达式
 <div id="test"><h1 class="my-red my-thin">common mathod </h1><br><h1 v-bind:class="['my-red', 'my-thin']">vue method</h1>.<br># 三元表达式<h1 :class="[flag ? 'my-active':'']">sanyuan</h1></div><script>var vm = new Vue({el: '#test',data:{flag: false}});</script>
方式三：在数组中使用 对象 来代替 三元表达式（提高代码的可读性）

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

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

代码如下：

<body><div id="app"><!-- vue的写法3：在数组中使用对象来代替三元表达式。--><h1 :class="[ {'my-active':flag} ]">我是qianguyihao，千古壹号</h1></div><script>var vm = new Vue({el: '#app',data: {flag: true}});</script>
</body>
方式四：直接使用对象
        <!-- vue的写法4：直接使用对象--><!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名。由于 对象的属性名可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 --><h1 :class="{style1:true, style2:false}">我是qianguyihao，千古壹号</h1>

上方代码的意思是，给<h1>标签使用样式style1，不使用样式style2。注意：

1、既然class样式名是放在对象中的，这个样式名不能有中划线，比如说，写成:class="{my-red:true, my-active:false}，是会报错的。

2、我们也可以对象通过存放在 data 的变量中。也就是说，上方代码可以写成：

<body><div id="app"><!-- vue的写法4：直接使用对象--><!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名。由于 对象的属性名可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 --><h1 :class="classObj">我是qianguyihao，千古壹号</h1></div><script>var vm = new Vue({el: '#app',data: {classObj:{style1:true, style2:false}}});</script>
</body>

设置style行内样式

方式1：直接在元素上通过 :style 的形式，书写样式对象。
        <h1 :style="{color: 'red', 'font-size': '20px'}">我是千古壹号，qianguyihao</h1>
方式2：将样式对象，定义到 data 中，并直接引用到 :style 中。
<body><div id="app"><h1 :style="styleObj">我是千古壹号，qianguyihao</h1></div><script>var vm = new Vue({el: '#app',data: {styleObj: { color: 'red', 'font-size': '20px' }}});</script>
</body>
方式3：写法二只用到了一组样式。如果想定义多组样式，可以用写法三。
<body><div id="app"><h1 :style="[ styleObj1, styleObj2 ]">我是千古壹号，qianguyihao</h1></div><script>var vm = new Vue({el: '#app',data: {styleObj1: { color: 'red', 'font-size': '20px' },styleObj2: { 'font-style': 'italic' }}});</script>
</body>

v-for使用的几种方式

作用：

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

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

<body><div id="app"><ul><li>{{list[0]}}</li><li>{{list[1]}}</li><li>{{list[2]}}</li></ul></div>
</body><script>var vm = new Vue({el: '#app',data: {list: [1, 2, 3]}});
</script>

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

<div id="test"><ul><li v-for="item in name">{{item}}</li></ul></div><script>var vm = new Vue({el: '#test',data:{name: ['dany','wenqun','tianzeng','larissa','wancy']}});</script>
使用方式
方式1：普通数组的遍历

针对如下类型的数组：

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

将数组中的值赋给li：

    <div id="test"><ul><li v-for="(item, indx) in name">{{item}} -----{{indx}}</li></ul></div><script>var vm = new Vue({el: '#test',data:{name: ['dany','wenqun','tianzeng','larissa','wancy']}});</script>

效果如下

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

方式2：对象数组的遍历

如下数组形式

 <script>var vm = new Vue({el: '#app',data: {//对象数组dataList: [{ name: 'smyh', age: '26' },{ name: 'vae', age: '32' },{ name: 'xiaoming', age: '20' }]}});</script>

遍历代码如下：

<div id="test"><ul><li v-for="(item, indx) in dataList">{{item}}-------{{item.name}} ---{{item.age}}--{{indx}}</li></ul></div><script>var vm = new Vue({el: '#test',data:{dataList: [{ name: 'smyh', age: '26' },{ name: 'vae', age: '32' },{ name: 'xiaoming', age: '20' }]}});</script>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

方式3：对象的遍历

针对如下数组

<script>new Vue({el: '#app',data: {obj1: {name: 'qianguyihao',age: '26',gender: '男'}}});
</script>

 <div id="test"><ul><li v-for="(value, key, indx) in obj1">{{key}} ---{{value}}--{{indx}}</li></ul></div><script>var vm = new Vue({el: '#test',data:{obj1: {name: 'qianguyihao',age: '26',gender: 'femal'}}});

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

方式4：遍历数字、字符串
 <div id="test"><ul><li v-for="(value, key, indx) in obj1">{{key}} ---{{value}}--{{indx}}</li></ul><ul><!-- ??????? --><!-- ??:???? v-for ??????,??? myCount ?? 1 ???? --><li v-for="myCount in 10">{{myCount}}</li><li v-for="myCount in obj1.name">{{myCount}}</li></ul></div><script>var vm = new Vue({el: '#test',data:{obj1: {name: 'qianguyihao',age: '26',gender: 'femal'}}});</script>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

注意事项

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

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

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

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

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="vue2.5.16.js"></script>
</head><body><div id="app"><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><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',list: [{ id: 1, name: 'smyh' },{ id: 2, name: 'vae' },{ id: 3, name: 'qianguyihao' },{ id: 4, name: 'xiaoming' },{ id: 5, name: 'xiaohong' }]},methods: {add() { // 添加方法this.list.unshift({ id: this.id, name: this.name })}}});</script>
</body></html>

v-if 设置元素的显示和隐藏

作用：

根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。

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

举例：

举例如下：（点击按钮时，切换和隐藏盒子）

    <div id="test"><button v-on:click="toggle">show/hide</button><div v-if="flag">I'm a police</div></div><script>var vm = new Vue({el: '#test',data:{flag:true},methods: {toggle() {this.flag = !this.flag}}});</script>

点击button页面上的字会来回切换

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

作用：

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

举例

如下：（点击按钮时，切换和隐藏盒子）我们直接把上一段代码中的v-if改成v-show就可以了：

    <div id="test"><button v-on:click="toggle">show/hide</button><div v-show="flag">I'm a police</div></div><script>var vm = new Vue({el: '#test',data:{flag:true},methods: {toggle() {this.flag = !this.flag}}});</script>
与v-if的区别
  1. v-if：每次都会重新添加/删除DOM元素
  2. v-show：每次不会重新进行DOM的添加/删除操作，只是在这个元素上添加/移除style="display:none"属性，表示节点的显示和隐藏。
优缺点
  1. v-if：有较高的切换性能消耗。这个很好理解，毕竟每次都要进行dom的添加／删除操作
  2. v-show：有较高的初始渲染消耗。也就是说，即使一开始v-show="false"，该节点也会被创建，只是隐藏起来了。而v-if="false"的节点，根本就不会被创建。
  3. 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
  4. 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

http://www.ppmy.cn/embedded/10966.html

相关文章

Kafka之日志存储详解

Kafka之日志存储详解

目录 1. 存储介质的速度常识 1.1 各个存储介质的速度层级图 1.2 速度层级描述 2. kafka日志文件目录结构 2.1 kafka日志文件目录描述 2.2 每个主题分区下的文件目录结构 3. 具体日志文件详解 3.1 ".index"文件 3.2 ”.timeindex“文件 3.3 ".log"…
阅读更多...
Flutter-如何序列化和反序列化为json对象

Flutter-如何序列化和反序列化为json对象

在Flutter中&#xff0c;使用json_serializable可以帮助你自动地序列化和反序列化JSON数据。这通常通过json_serialization库实现&#xff0c;它基于Dart的源代码生成功能。以下是如何在Flutter中使用json_serializable的步骤&#xff1a; 1.添加依赖&#xff1a; 首先&#…
阅读更多...
cdh cm界面HDFS爆红：不良 : 该 DataNode 当前有 1 个卷故障。 临界阈值：任意。（Linux磁盘修复）

cdh cm界面HDFS爆红：不良 : 该 DataNode 当前有 1 个卷故障。 临界阈值：任意。（Linux磁盘修复）

一、表现 1.cm界面 报错卷故障 检查该节点&#xff0c;发现存储大小和其他节点不一致&#xff0c;少了一块物理磁盘 2.查看该磁盘 目录无法访问 dmesg检查发现错误 dmesg | grep error二、解决办法 移除挂载 umount /data10 #可以移除挂载盘&#xff0c;或者移除挂载目…
阅读更多...
ROS_第一个程序_Hello_world

ROS_第一个程序_Hello_world

ROS的第一个项目&#xff1a;输出Hello World 我们将学习如何创建一个简单的ROS&#xff08;Robot Operating System&#xff09;项目&#xff0c;该项目将在终端中输出"Hello World"。我们将使用Python语言进行编程。 环境准备 首先&#xff0c;确保你的计算机已…
阅读更多...
Springboot+Vue项目-基于Java+MySQL的在线文档管理系统(附源码+演示视频+LW)

Springboot+Vue项目-基于Java+MySQL的在线文档管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…
阅读更多...
面试算法题之暴力求解

面试算法题之暴力求解

这里写目录标题 1 回溯1.1 思路及模板1.1 plus 排列组合子集问题1.2 例题1.2.1 全排列1.2.2 N 皇后1.2.3 N皇后问题 II1.2.4 子集 &#xff08;子集/排列问题&#xff09;1.2.4 组合(组合/子集问题)1.2.5 全排列 &#xff08;排列问题&#xff09;1.2.1做过1.2.6 子集II &#…
阅读更多...
PostgreSql-Install

PostgreSql-Install

PostgreSql源码安装 一、源代码下载二、操作系统配置三、编译安装四、启动数据库五、相关命令 PostgreSQL是一个强大的 开源对象关系数据库系统&#xff0c;它使用并扩展了SQL语言&#xff0c;并结合了许多功能&#xff0c;可以安全地存储和扩展最复杂的数据工作负载。 一、源…
阅读更多...
pdf加水印怎么加？自己原创的PDF资料分享到网络上需要采取一些版权保护的措施，添加水印就是个不错的选择

pdf加水印怎么加？自己原创的PDF资料分享到网络上需要采取一些版权保护的措施，添加水印就是个不错的选择

一&#xff0c;水印的基本概念 水印通常是一种用于标识文件来源、版权信息或防止非法复制的标记。它可以是文字、图形或图像等形式&#xff0c;以半透明或半淡化的方式嵌入到文件中&#xff0c;既不影响文件的正常阅读&#xff0c;又能起到标识和保护的作用。 二&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023