Vue 初体验（三） v-model的进阶及控制流指令v-if

最新推荐文章于 2024-04-26 17:37:33 发布

yangzm996

最新推荐文章于 2024-04-26 17:37:33 发布

阅读量369

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_39448579/article/details/122127846

版权

Vue.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、v-model指令及其修饰符

效果

在这里插入图片描述
后面显示随着前面输入而更改，文字需要焦点离开输入框之后才刷新，数字框限制只能输入数字

HTML

<!DOCTYPE html>
<html lang="zh-cn">
<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>
</head>
<body>
  <!-- Vue  v-model指令及其修饰符 -->
<div id="app">
 <!--<input type="text" v-model="name"> 实时更新 -->
 <input type="text" v-model.lazy="name"><!--惰性更新-->
 <!--<input type="text" v-model.trim="name">前后空格清除-->
  {{name}}
 <input type="text" v-model.number="price"><!--限制只输入数字-->
 {{price}}
</div>
<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>

JS

new Vue({
  el:'#app',
  data:{
    name:'大帅比',
    price:10
  }
})

二、v-model在其他元素及类型上的用法

先放JS代码

下面的只放了html中的关键代码，引用JS的记得添加

new Vue({
  el:'#app',
  data:{
   sex:'male',//单选框是单个属性
   sexs:["male"],//多选框可以多个属性
   article:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
   from:'1',
   dest:[]
  }
})

单选框

效果
在这里插入图片描述

<div id="app">
<label>
  男
<input type="radio" v-model="sex" value="male">
</label>
<label>
  女
<input type="radio" v-model="sex" value="female">
</label>
{{sex}}
</div>

多选框

效果
在这里插入图片描述

<div id="app">
<label>
  男
<input type="checkbox" v-model="sexs" value="male">
</label>
<label>
  女
<input type="checkbox" v-model="sexs" value="female">
</label>
<br>
{{sexs}}
</div>

单选选择框

效果
在这里插入图片描述

<div id="app">
<div>你来自哪里?</div>
<select v-model="from">
<option value="1">江西</option>
<option value="2">北京</option>
</select>
{{from}}
</div>

多选选择框

效果图
在这里插入图片描述

<div id="app">
<div>你要去哪里?</div>
<select v-model="dest" multiple>
<option value="1">西藏</option>
<option value="2">美国</option>
<option value="3">日本</option>
</select>
{{dest}}
</div>

控制流指令v-if

HTML

<div id="app">
<div v-if="role=='admin'||role=='super_admin'">
  管理员牛逼
</div>
<div v-else-if="role=='hr'">
    普通员工
</div>
<div v-else>
   您是啥玩意
</div>
</div>

JS

new Vue({
  el:'#app',
  data:{
       role:'super_admin'
  }
})

yangzm996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 初体验（三） v-model的进阶及控制流指令v-if

一、v-model指令及其修饰符效果后面显示随着前面输入而更改，文字需要焦点离开输入框之后才刷新，数字框限制只能输入数字HTML<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
复制链接

扫一扫