扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >Vue中有哪些基本的指令
  • 384

0
分享到

Vue中有哪些基本的指令

2023-06-06 14:06:40 384人浏览 八月长安
摘要

Vue中有哪些基本的指令？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。一. v-on指令1. 基础用法v-on是事件监听的指令, 下面来看简单用法<!DO

Vue中有哪些基本的指令？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

一. v-on指令

1. 基础用法

v-on是事件监听的指令, 下面来看简单用法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h3>{{counter}}</h3> <button v-on:click="add"> + </button> <button v-on:click="sub"> - </button></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   counter: 0  },  methods: {   add() {    this.counter ++   },   sub() {    this.counter --   }  } });</script></body></html>

我们给按钮绑定了点击事件. v-on:click = "add"

  • v-on: 后面加时间名称

  • 需要指定绑定事件的事件名

来看看运行效果

Vue中有哪些基本的指令

2. 语法糖

我们知道, v-bind指令可以简写为:, 同样v-on也可以简写, 简写为@, 如上写法可以简写如下:

<button @click="add"> + </button><button @click="sub"> - </button>

3. 事件的参数

  • 无参方法

上面的案例都是不带参数. 如果方法没有参数, 那么我们在调用的时候可以省略括号

add方法不带参数, 调用的时候可以有如下两种写法:

复制代码 代码如下:<button @click="add"> + </button>或者<button @click="add()"> + </button>

两种写法都可.

  • 有参方法

如果一个方法有参数, 如下案例

<script> var app = new Vue({  el: "#app",  data: {   num1: 10,   num2: 100  },  methods: {   print(message) {    console.log("打印" + message)   }  } });</script>

调用方式1: 那么调用的时候括号里不带参数.

<div id="app"> <button @click="print()"> 打印 </button></div>

这是方法的参数传入的是undefined.

Vue中有哪些基本的指令

调用方式2: 不带括号

<div id="app"> <button @click="print"> 打印 </button></div>

这里和方式1的区别是, 调用方法的括号都省了.

这时会是什么效果呢?

Vue中有哪些基本的指令

可以看到, 这时不是undefined了, 而是一个MouseEvent鼠标事件.

为什么呢? 其实, 当鼠标点击按钮的时候, 页面会自动生成一个事件, 如果没有传递参数, 那么会自动将这个事件作为参数传递过了, 如果需要调用这个事件, 那么, 可以在方法入参,显示的接收event参数.

调用方式3: 参数中既有普通参数, 又有event参数

这是我们调用的时候, 要使用$event

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <button @click="print"> button1 </button> <button @click="print1('aaa')"> button2 </button> <button @click="print1('aaa', $event)"> button3 </button></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   num1: 10,   num2: 100  },  methods: {   print(message) {    console.log("打印" + message)   },   print1(message, event){    console.log("打印" + event + ", message:" + message)   },   print2(message, event) {    console.log("event:" + event + ", message:" + message)   }  } });</script></body></html>

然后来看效果

Vue中有哪些基本的指令

同时将message和event都传递过来了

4. 事件修饰符

  • stop : 调用event.stopPropagation() 阻止冒泡事件

看如下代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app" @click="divClick"> <button @click="btnClick">按钮</button></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   message: "hello"  },  methods:{   divClick(){    console.log("divClick")   },   btnClick(){    console.log("btnClick")   }  } });</script></body></html>

div里面有一个btn, div有一个click事件, btn也有一个click事件, 当我们点击btn的时候, 回调用两个方法么?我们来看看效果

Vue中有哪些基本的指令

确实调用了btn的click()方法, 而且还调用了div的click()方法. 这是事件冒泡机制, 通常我们在页面是要避免这样的情况发生的. 所以会写一个方法阻止事件冒泡.

但是在vue里面, 使用stop修饰符就可以解决这个问题. 在btn按钮的click事件上增加stop修饰符

<div id="app" @click="divClick"> <button @click.stop="btnClick">按钮</button></div>

这样就阻止了冒泡事件

Vue中有哪些基本的指令

  • prevent: 调用event.preventDefault() 阻止默认事件

我们现在methods中定义一个方法

stopDefaultEventBtn(){ console.log("stopDefaultEventBtn")}

调用的时候, 我们定义一个submit表单提交按钮, 我们知道表单有自己的提价时间, 点击按钮将跳转到fORM表单指定的action地址.

<div id="app" @click="divClick"> <button @click.stop="btnClick">阻止冒泡事件</button><br/><br/> <form action="Http://www.baidu.com">  <input type = "submit" value="阻止默认事件"></input> </form></div>

现在我们不想使用submit的自动提交事件, 我们要阻止他, 而是使用我么自定义的stopDefaultEventBtn事件.

<div id="app" @click="divClick"> <button @click.stop="btnClick">阻止冒泡事件</button><br/><br/> <form action="http://www.baidu.com">  <input type = "submit" @click.prevent="stopDefaultEventBtn" value="阻止默认事件"></input> </form> <!-- submit 有自己的模式提交事件, 但通常我们不希望使用默认的提交时间, 而是使用我自定义的事件. --></div>

这时, 我们在调用方法, 发现不会自动跳转到action指定的事件了, 而是进入到click事件.

Vue中有哪些基本的指令

但是有个问题, 虽然调用了click指定的事件, 但是依然有事件冒泡, 同时还调用和div的click事件, 这个简单, 在增加阻止冒泡事件就可以了.

<div id="app" @click="divClick"> <button @click.stop="btnClick">阻止冒泡事件</button><br/><br/> <form action="http://www.baidu.com">  <input type = "submit" @click.prevent.stop="stopDefaultEventBtn" value="阻止默认事件"></input> </form> <!-- submit 有自己的模式提交事件, 但通常我们不希望使用默认的提交时间, 而是使用我自定义的事件. --></div>

  • (keyCode | keyAlias): 只当事件是从特定键触发时才触发回调

我们来监听一个键盘的按键事件 --- 监听键盘上回车按钮的按键事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <input type="text" @keyup.enter="keyup" /><br/><br/></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   message: "hello"  },  methods:{   keyup() {    console.log("keyup")   }  } });</script></body></html>

@keyup.enter="keyup" 在keyup事件后面增加.enter即可

  • once: 只触发一次回调

增加了 .once的事件, 只有第一次点击有反应, 后面点击就没有反应了.

二. v-if指令

条件判断, 有三个指令

  • v-if

  • v-else-if

  • v-else

来看案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!-- 我们开发过程中通常会遇到状态, 1:表示启用, 2:表示禁用 3: 表示删除--><div id="app"> <h3 v-if = "status == 1"> 启用 </h3> <h3 v-else-if = "status == 2"> 禁用 </h3> <h3 v-else> 删除 </h3> </div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   status: 1  } });</script></body></html>

这个案例很简单,就不说了. 有一点可以说, 就是通常只有两种情况, 很简单的两种情况,我们会使用v-if, v-else. 如果情况很复杂, 不建议在代码写很多v-else-if, 因为可读性差, 我们应该吧条件判断放到methods或者computed中进行计算, 最后返回结果.

案例: 登录界面使用账号登录和邮箱登录的切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!-- 我们开发过程中通常会遇到状态, 1:表示启用, 2:表示禁用 3: 表示删除--><div id="app"> <label v-if="userLogin">账号登录 <input type="text" placeholder="请输入账号"> </label> <label v-else>邮箱登录  <input type="text" placeholder="请输入邮箱"> </label> <button @click="userLogin = !userLogin" >切换</button></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   userLogin: true  } });</script></body></html>

在这里, 我们定义了一个变量userLogin, 是否是用户登录, 默认是true; 定义两个label和一个button, 点击切换按钮, 来两个label之间来回切换.效果如下图

Vue中有哪些基本的指令

但是这里有个问题, 当我们输入内容以后, 切换文本框的时候, 内容却不会消失. 如下图

Vue中有哪些基本的指令

  • 存在的问题: 切换了类型, 输入的文字却没有被清空.

我们发现, 在账号登录里面输入了1234, 切换到邮箱登录的时候, 却没有被清空. 这是两个文本框, 但是值怎么被带过来了呢?

  • 原因

这是由于vue在进行dom渲染时, 考虑到性能问题, 会尽可能复用已经存在的元素. 而不是每次都创建新的元素. 这就是vue的虚拟dom.

Vue中有哪些基本的指令

如上图, 我们的dom元素, 之前都是直接渲染到浏览器页面的. 但是增加了vue以后, vue会帮我们将dom元素先进行缓存, 缓存为虚拟dom.

当我们使用v-if指令的时候, 两个div的元素不可能同时执行. 第一个div元素被渲染了以后, 在渲染第二个div的时候, 他发现有类似的元素, 那么vue就缓存一份. 当执行到else的时候, vue判断元素一样, 只是部分内容不同, 那就渲染不同的部分,相同的不会修改. 而我们输入的内容, 不在比较的范围内, 所以, 会被带过去.

  • 如何避免这种情况呢? 使用属性key

<div id="app"> <label v-if="userLogin">账号登录 <input type="text" placeholder="请输入账号" key="user"> </label> <label v-else>邮箱登录  <input type="text" placeholder="请输入邮箱" key="email"> </label> <button @click="userLogin = !userLogin" >切换</button></div>

如果两个key是一样的, 那么就虚拟dom就缓存一份, 如果两个key是不同的, 那么虚拟dom就会缓存两份. 来看看这次的效果

Vue中有哪些基本的指令

三. v-show指令

v-show很简单, 就是隐藏/显示元素

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!-- 我们开发过程中通常会遇到状态, 1:表示启用, 2:表示禁用 3: 表示删除--><div id="app"> <h3 v-if = "isshow"> 启用 </h3> <h3 v-show = "isShow"> 启用 </h3></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   isShow: true  } });</script></body></html>

Vue中有哪些基本的指令

这两个都是可以显示出来, 我们设置isShow=false, 都隐藏了,但隐藏的结果是不同的. 我们来看看html代码

Vue中有哪些基本的指令

我们发现代码里只有useShow对象, 并且增加了display:none样式, 而没有useIf对象. 也就是被直接删除了

总结: v-if和v-show的区别

  • v-if: true: 添加元素, false: 删除元素

  • v-show: true: 增加样式display:block; false: 修改样式display:none

那么如何选择呢?

  • 当现实与隐藏切换的很频繁的时候, 使用v-show

  • 当只有一次切换时, 使用v-if

四. v-for指令

遍历有遍历数组, 遍历对象两种形式

1. 遍历数组

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>Title</title></head><body><div id="app"> <ul>  <li v-for="item in languages">{{item}}</li>  <li v-for="(item, index) in languages"> {{index}}--{{item}}</li> </ul></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   languages: ["java", "PHP", "python"]  } });</script></body></html>

遍历数组如果不带下标, 可以这么写

<li v-for="item in languages">{{item}}</li>

Vue中有哪些基本的指令

如果带有下标, 可以这么写

<li v-for="(item, index) in languages"> {{index}}--{{item}}</li>

Vue中有哪些基本的指令

2. 遍历对象

遍历对象有三种方式

  • 只显示对象的value

  • 显示对象的key和value

  • 显示对象的index, key和value

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>Title</title></head><body><div id="app"> <p> 只显示对象的value </p> <ul>  <li v-for="item in students">{{item}}</li> </ul> <p> 显示对象的key 和 value </p> <ul>  <li v-for="(value, key) in students">{{key}} -- {{value}}</li> </ul> <p> 显示对象的编号 </p> <ul>  <li v-for="(value, key, index) in students">{{index}} -- {{key}} -- {{value}} </li> </ul></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   students: {    name: "zhangsan",    age: 20,    sex: "male"   }  } });</script></body></html>

具体写法如上图. 需要注意的是, 当显示key和value的时候, value写在前面, key写在后面

Vue中有哪些基本的指令

3. 组件的key属性

官方推荐, 我们在使用v-for的时候, 应该给对应的元素添加一个:key属性

为什么要添加key属性呢?

详细参考这篇文章:www.jianshu.com/p/4bd5e745ce95

增加了:key以后,会让内部的计算性能提高, 那么应该怎么加呢?

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

使用的时候, 如上示例: :key="item",

  • 写法: :key

  • 值是什么? 这里的值必须是要可以和value一一对应的. 所以, 我们这里直接设置为item. 如果设置为index可以么? 当然不可以, 因为当想数组中增减元素的时候, index就变化了

4. 数组中哪些方法是响应式的

其实, 通常我们在遍历数组, 修改数组的值的时候, 习惯于使用下标修改.

如:

this.languages[0] = "aaaa";

但是, 我们看看,下标修改在vue中会怎么样呢?

Vue中有哪些基本的指令

我们发现修改了languages,但是页面没变化, 实际上确实是修改了

所以, 我们得出结论: 直接通过下标修改元素, 是非响应式的.

那么数组的其他方法呢?看下面的案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <ul>  <li v-for="(item, index) in languages"> {{index}}--{{item}}</li> </ul> <br><br/><br/><br/><br/> <button @click="pushMethod">push</button> <button @click="popMethod">pop</button> <button @click="shiftMethod">shift</button> <button @click="unShiftMethod">unshift</button> <button @click="updateElement"></button> <button @click="spliceMethod">splice</button></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   languages: ["java", "php", "Python", "Go", "C语言"]  },  methods: {   pushMethod() {    this.languages.push("其他语言")   },   popMethod() {    this.languages.pop()   },   shiftMethod() {    this.languages.shift()   },   unShiftMethod() {    this.languages.unshift("其他语言")   },   updateElement(){    this.languages[0] = "aaaa";   },   spliceMethod() {        // 删除元素    //this.languages.splice(1, 1)    // 修改元素     //this.languages.splice(1, 2, "pthoon语言", "go语言")    // 添加元素    this.languages.splice(1, 0, "未来语言1", "未来语言2")   }  } });</script></body></html>

  • push(从尾部添加元素---响应式的

  • pop : 从尾部删除元素---响应式的

  • shift : 从顶部删除元素---响应式的

  • unshift : 从顶部添加元素---响应式的

  • splice : 添加元素, 修改元素, 删除元素---响应式的

通过测试, 这几个方法都是响应式的.

所以, 如果我们想要修改/删除元素, 建议使用splice, 这样可以立刻看到效果.

五. v-model指令

1. v-model的基本用法

v-model指令用来实现表单元素和数组元素的双向绑定

  • 在输入框输入内容时, 会实时将输入内容传递给data数据

  • data数据发生变更, 也会实时同步给输入框

  • 双向绑定

案例: 文本框输入双向同步

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <form>  <input type="text" placeholder="请输入" v-model="message"> </form> message的内容是:{{message}}</div><script src="../js/vue.js"></script><script> let app = new Vue({  el: "#app",  data: {   message: "hello"  } });</script></body></html>

我们定义了一个变量message, 然后在input输入框中使用v-model="message"就可以和这个变量进行双向绑定了

Vue中有哪些基本的指令

2. v-model的原理

其实v-model包含了两个操作

  • 一个是v-bind: 绑定data数据给input属性

  • 另一个是v-on: 调用输入框的input事件, 实时修改data数据

案例: 模拟v-model的两步操作

首先, 我们知道让文本框显示data中message的值, 可以直接使用v-bind:value, 这样我们修改了message的值, 文本框自动响应

<input type="text" placeholder="请输入" :value="message">

这是将数据响应给文本框. 那么, 如何将文本框修改的内容,同步给数据呢? 使用文本框的输入事件: v-on:input

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <input type="text" placeholder="请输入" :value="message" @input="change"> <p>message的内容是:{{message}}</p></div><script src="../js/vue.js"></script><script> let app = new Vue({  el: "#app",  data: {   message: "hello"  },  methods: {   change(event) {    this.message = event.target.value;   }  } });</script></body></html>

这里使用了@input给文本框绑定了input事件, change()方法没有加括号, 会自动将默认的参数event传过去, 如果想要显示的设置event参数, 可以试用@input="change($event)".

然后在change方法中, 设置this.message=event.target.value;

结论:

<input type="text" v-model="message">

等同于

<input type="text" v-bind:value="message" v-on:input="message=$event.target.value">

2. v-model在radio中的使用

案例: 性别选择

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <form>  <input type="radio" name="sex" id="male" value="男" v-model="sex">男  <input type="radio" name="sex" id="female" value="女" v-model="sex">女 </form> 当前选中的是: {{sex}}</div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   message: "hello",   sex: "男"  } });</script></body></html>

使用了v-model以后, 就可以不使用name属性了, 默认将具有同一个v-model值的radio作为一组

Vue中有哪些基本的指令

3. v-model在checkbox中的使用

1) checkbox单选框

案例: 是否同意协议

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <label for="agreeContent"> 　　<input type="checkbox" name="agreeContent" id="agreeContent" value="同意协议" v-model="agreeContent">统一协议 　　<br/>当前选中的是: {{agreeContent}} </label></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   message: "hello",   agreeContent: false  } });</script></body></html>

是否同意协议: data数据中agreeContent: 值是true或者false. true表示选中文本框, false表示取消选中

注意: label的好处

input被包在了label中, 这样的好处是, 点击文字也可以选中和取消. 如果不放在lable中,就必须选择复选框.

2) checkbox复选框

复选框的值是一个数组

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h3>单选框</h3> <label for="agreeContent"> <input type="checkbox" name="agreeContent" id="agreeContent" value="同意协议" v-model="agreeContent">同意协议 <br/>当前选中的是: {{agreeContent}} </label> <br/><br/><br/><br/><br/> <h3>复选框</h3> <form>  <input type="checkbox" name = "hobby" value="乒乓球" v-model="hobbies">乒乓球  <input type="checkbox" name = "hobby" value="篮球" v-model="hobbies">篮球  <input type="checkbox" name = "hobby" value="足球" v-model="hobbies">足球  <input type="checkbox" name = "hobby" value="排球" v-model="hobbies">排球  <br/>当前选中的爱好是: {{hobbies}} </form></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   message: "hello",   agreeContent: false,   hobbies:[]  } });</script></body></html>

在data中定义了一个hobbies数组. 并且将这个数组绑定给checkbox付款框的每一项. 即可实现效果

Vue中有哪些基本的指令

区别:

  • 单个复选框对应的data是bool类型

  • 多个复选框对应的data是数组类型

4. v-model在select中的使用

1) select单选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <select v-model="selectOne">  <option id="apple" value="苹果" >苹果</option>  <option id="banana" value="香蕉" >香蕉</option>  <option id="strawberry" value="草莓" >草莓</option>  <option id="grape" value="葡萄" >葡萄</option> </select> <br/> <p>当前选中的是: {{selectOne}}</p></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   message: "hello",   sex: "男",   selectOne:"苹果"  } });</script></body></html>

注意: 在select单选下拉框中, v-model要写在select元素上

Vue中有哪些基本的指令

2) select多选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <br/> <br/> <br/> <select v-model="favoriteFrite" multiple>  <option id="apple" value="苹果" >苹果</option>  <option id="banana" value="香蕉" >香蕉</option>  <option id="strawberry" value="草莓" >草莓</option>  <option id="grape" value="葡萄" >葡萄</option> </select> <br/> <p>当前选中的是: {{favoriteFrite}}</p></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   message: "hello",   favoriteFrite:[]  } });</script></body></html>

在使用多选的时候, 在select中增加一个multiple即可设置为多复选.

在数据中, 我们需要将其设置为一个数组. 如favoriteFrite:[]

下面来看看效果

Vue中有哪些基本的指令

总结:

  • 单选: 只能选中一个值, v-model绑定的是一个值

  • 多选: 可以选中多个值, v-model绑定的是一个数组

6. v-model的修饰符

1. Lazy修饰符

默认情况下, v-model是实时双向同步的. 但有时候, 我们不希望他每次变化都实时响应, 那么, 可以使用lazy修饰符

v-model.lazy , 使用了lazy以后按回车或者文本框是去焦点即同步内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app">  <input type="text" v-model.lazy="message"/> <p>message的内容是:{{message}}</p></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   message: "hello",   count: 0,   name:"zhangsan"  } });</script></body></html>

看效果

Vue中有哪些基本的指令

2. number修饰符

通常我们在写一个只能输入数字的文本框时, 会这么写<input type="number" v-model = "count">

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <input type="number" v-model = "count"> <p>count的类型: {{count}} --- {{typeof count}}</p></div><script src="../js/vue.js"></script><script> var app = new Vue({  el: "#app",  data: {   message: "hello",   count: 0,   name:"zhangsan"  } });</script></body></html>

但这么写获取到的count值是什么类型呢? 我们使用{{typeof count}}来看看count的类型. 如下图

Vue中有哪些基本的指令

我们看到count的类型是String. 而不是number类型
如何才能让count是number类型呢? 使用v-model.number="count", 如下图:

<input type="number" v-model.number = "count">

3. trim修饰符

通常我们在文本框输入文本的时候, 可能会误输入空格, 我们可以使用trim修饰符, 去掉文本框左右的空格

<input type="text" v-model.trim="name">

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网精选频道，感谢您对编程网的支持。

--结束END--

本文标题: Vue中有哪些基本的指令

本文链接: https://lsjlt.com/news/247270.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue中有哪些基本的指令
    Vue中有哪些基本的指令？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。一. v-on指令1. 基础用法v-on是事件监听的指令, 下面来看简单用法<!DO...
    99+
    2023-06-06
  • docker中有哪些基本的指令
    这期内容当中小编将会给大家带来有关docker中有哪些基本的指令，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。1、查看当前机器的容器情况    通常情况下，我们可以使用docker p...
    99+
    2023-06-14
  • Redis事务基本指令有哪些
    本篇内容主要讲解“Redis事务基本指令有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Redis事务基本指令有哪些”吧!Redis 事务简介Redis 只是提供了简单的事务功能。其本质是一...
    99+
    2023-07-04
  • vue中常用的指令有哪些
    vue中常用的指令有：v-model指令，用于表单输入。v-on指令，用于事件绑定。v-bind指令，用于动态绑定一个值和传入变量。v-once指令，事件只能用一次，无论点击几次，执行一次之后都不会再执行。v-html指令，会将span的内...
    99+
    2024-04-02
  • Vue中的常用指令有哪些
    这篇文章主要介绍了Vue中的常用指令有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中的常用指令有哪些文章都会有所收获，下面我们一起来看看吧。首先来聊聊Vue框架，Vue是一套用于构建用户界面的渐进式...
    99+
    2023-06-26
  • Vue中常用指令有哪些
    这篇文章将为大家详细讲解有关Vue中常用指令有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体如下：1、创建一个vue实例vue的一个特点就是数据驱动界面，一旦对j...
    99+
    2024-04-02
  • Linux常用的文件基本指令有哪些
    这篇文章主要介绍“Linux常用的文件基本指令有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Linux常用的文件基本指令有哪些”文章能帮助大家解决问题。帮助指令man    ...
    99+
    2023-07-06
  • Vue常用的指令有哪些
    这篇文章给大家分享的是有关Vue常用的指令有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。1. v-textv-text主要用来更新textContent，可以等同于JS的t...
    99+
    2024-04-02
  • vue的内置指令有哪些
    vue中的内置指令有：1.v-show指令，根据表达式切换元素的display属性；2.v-if指令，用于条件性地渲染一块内容；3.v-for指令，基于一个数组或对象渲染一个列表；4.v-bind指令，动态地绑定一个或多个特性；vue中的内...
    99+
    2024-04-02
  • vue常见的指令有哪些
    vue中常见的指令有：1.v-if指令，用于条件性地渲染一块内容；2.v-for指令，基于一个数组或对象渲染一个列表；3.v-show指令，根据表达式切换元素的display属性；4.v-bind指令，动态地绑定一个或多个特性；vue中常见...
    99+
    2024-04-02
  • vue中有哪些自定义指令
    这篇文章主要介绍“vue中有哪些自定义指令”，在日常操作中，相信很多人在vue中有哪些自定义指令问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中有哪些自定义指令”的疑惑有所帮助！接下来，请跟着小编一起来...
    99+
    2023-06-22
  • Vue常用指令有哪些
    这篇文章将为大家详细讲解有关Vue常用指令有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。Vue的优点Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优...
    99+
    2023-06-14
  • Vue有哪些常用指令
    本篇内容主要讲解“Vue有哪些常用指令”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue有哪些常用指令”吧!指令是以数据去驱动DOM行为，简化DOM操作。常用指令如下v-text  ...
    99+
    2023-06-04
  • vue的基本类型有哪些
    这篇文章主要介绍了vue的基本类型有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue的基本类型有哪些文章都会有所收获，下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • Docker的基本命令有哪些
    小编给大家分享一下Docker的基本命令有哪些，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！一、系统相关命令：1 查看docker 的版本信息：docker version2 查看docker 系统信息：docker in...
    99+
    2023-06-07
  • linux的基本命令有哪些
    这篇文章将为大家详细讲解有关linux的基本命令有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一些常用的基本命令:uname -a查看内核版本ls -al显示所有文件的属性pwd 显示当前路径cd ...
    99+
    2023-06-17
  • vue指令的三要素有哪些
    这篇文章给大家分享的是有关vue指令的三要素有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 vue指令的三要素是响应式、模板引擎和渲染。响应式是...
    99+
    2024-04-02
  • MYSQL基本命令有哪些
    这篇文章主要讲解了“MYSQL基本命令有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“MYSQL基本命令有哪些”吧！ 一、...
    99+
    2024-04-02
  • mongodb有哪些基本命令
    mongodb有哪些基本命令？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。1 切换数据库use admin;2 查看当前数据库db;...
    99+
    2024-04-02
  • docker基本命令有哪些
    这篇文章主要介绍了docker基本命令有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。docker基本命令docker文件系统docker镜像为分层设计，相比于全量的虚拟...
    99+
    2023-06-29
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作