Vue.js指令

wanglingli95

已于 2022-02-21 10:23:54 修改

阅读量1.1k

点赞数 1

分类专栏： Vue开发文章标签： vue.js 前端 javascript 前端框架 vscode

于 2022-02-18 17:05:54 首次发布

本文链接：https://blog.csdn.net/wanglingli95/article/details/122992586

版权

Vue开发专栏收录该内容

21 篇文章 3 订阅

订阅专栏

一、条件渲染指令

条件渲染指令主要包括：v-if、v-else、v-show指令。

1.1 V-if 指令

语法：v-if=' 表达式 '

根据表达式结果的真假来确定是否显示当前元素，如果表达式为true，显示该元素；如果表达式为false，则隐藏该元素。

示例代码(HelloWorld.vue)：

<template>
  <div class="hello">
    <h1 v-if="isShow">表达式的值为真就能显示</h1>
  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  data (){
    return{
      isShow:true
    }
  }
}
</script>

<style scoped>
h1{
  font-size:20px;
  font-weight: normal;
}
</style>

在<template>元素上使用v-if条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

1.2 v-else 指令

v-else指令就是为v-if指令添加了一个else块，v-else元素必须紧跟在v-if元素的后面，否则不能被识别。

语法：v-else指令后面不需要再跟表达式，如果v-if为true，后面的v-else不会被执行；如果v-if为false，后面的v-else才会被执行进行渲染到html中。

示例代码(HelloWorld.vue)：

<template>
  <div class="hello">
    <h1 v-if="isShow">表达式的值为真就能显示</h1>
    <h1 v-else>当v-if不成立的时候才显示</h1>
  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  data (){
    return{
      isShow:false
    }
  }
}
</script>

<style scoped>
h1{
  font-size:20px;
  font-weight: normal;
}
</style>

1.3 v-else-if

顾名思义，充当 v-if 的“else-if 块”，类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后，可以连续使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

1.4 v-show指令

语法：v-show=' 表达式 '

当v-show表达式的值为false时，元素会隐藏，查看DOM元素结构会发现元素上加载了display:none 属性。

示例代码：

<template>
  <div class="hello">
    <h1 v-show="status == 1">当status为1时显示改行内容</h1>

  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  data (){
    return{
      status:2
    }
  }
}
</script>

<style scoped>
h1{
  font-size:20px;
  font-weight: normal;
}
</style>

小结：v-if与v-show的区别

v-show只是简单地通过display的属性值进行切换，而v-if表达式为false时则直接销毁，不会渲染到页面元素中。
v-if更适合条件不经常改变的场景，因为v-if指令有更高的切换消耗，而v-show指令有更高的初始渲染销毁；如果需要频繁切换，使用v-show较好。

二、列表渲染v-for指令

语法：

v-for = '(item,index) in items'

item 表示每次遍历得到的元素
index表示item的索引，为可选参数
items表示数组或者对象

2.1 遍历对象

示例代码：

<template>
  <div class="hello">
    <ul>
      <li v-for="(value,key,index) in person" :key="index">
        {{index}}-{{key}}-{{value}}
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  data (){
    return{
      person:{
        name:"小暖",
        age:20
      }
    }
  }
}
</script>

<style scoped>
h1{
  font-size:20px;
  font-weight: normal;
}
</style>

2.2 遍历数组

示例代码：

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in lesson" :key="index">
        {{index}}-{{item.name}}-{{item.type}}
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  data (){
    return{
      lesson:[
        {name:'前端三大块',type:['HTML','CSS','Javascript']},
        {name:'前端三大框架',type:['vue.js','react','angularjs']},
      ]
    }
  }
}
</script>

<style scoped>
h1{
  font-size:20px;
  font-weight: normal;
}
</style>

注意：尽可能在使用v-for指令时，提供key属性（:key="index"),除非遍历输出的DOM内容非常简单。

三、方法与事件

3.1 v-on 指令

v-on 指令为HTML元素绑定监听事件，类似JavaScript的onclick事件。

语法：

v-on:事件名称='函数名称( )'

示例代码（事件方法不带参数）：

<template>
  <div class="hello">
    <!-- 没有参数时，方法后面的括号可以省略 -->
    <!-- <button v-on:click='fn()'>toggle</button> -->
    <!-- <button v-on:click='fn'>toggle</button> -->
    <button @click='fn'>toggle</button>
    <div v-show="bol" class="box"></div>

  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  data (){
    return{
      bol:false
    }
  },
  methods:{
    fn:function(){
      this.bol=!this.bol;
    }
  }
}
</script>

<style scoped>
.hello{
  width:100px;
  height: 100px;
  margin:10px auto;
}
.box{
  width:100px;
  height: 100px;
  background:red;
  margin:10px auto;
}
</style>

示例代码（事件方法带参数）：

<template>
  <div class="hello">
    <!-- <button v-on:click="say('Hello')">Hello</button> -->
    <button @click="say('Hello')">Hello</button>


  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  data (){
    return{
      bol:false
    }
  },
  methods:{
    say:function(msg){
      alert(msg);
    }
  }
}
</script>

<style scoped>
.hello{
  width:100px;
  height: 100px;
  margin:10px auto;
}
.box{
  width:100px;
  height: 100px;
  background:red;
  margin:10px auto;
}
</style>

3.2 事件修饰符

v-on后面还可以增加修饰符，即在@绑定的事件后加小圆点“.”再跟一个后缀，Vue中常用的修饰符如下：

.stop：调用event.stopPropagation()。
.self：当事件是从侦听器绑定的元素本身触发时才触发回调。
.prevent ：调用 event.preventDefault()。

冒泡事件发生的效果代码1：

<template>
  <div class="hello">
    <div class="div-par" @click="parent">
      parent
      <div class="div-chil" @click="child">
        child
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  data (){
    return{
      
    }
  },
  methods:{
    parent:function(){
      alert("parent");
    },
    child:function(){
      alert("child");
    }
  }
}
</script>

<style scoped>
.div-par{
  width:100px;
  height: 100px;
  border: 1px solid #333;
  margin:20px auto;
  color:#333;
}
.div-chil{
  width:50px;
  height: 50px;
  border:1px solid #333;
  margin:10px 25px;
}
</style>

冒泡事件：当单击child盒子时，网页会连续弹出来两个弹窗，child身上的点击事件触发了父盒子div身上的点击事件，也称为冒泡行为。我们可以利用修饰符解决这个问题，让父盒子不触发点击事件。

第一种方式（给子盒子加.stop修饰符)：<div class="div-chil" @click.stop="child">

第二种方式（给父盒子加.self修饰符）：<div class="div-par" @click.self="parent">

a链接的点击弹窗并页面跳转的代码：

<template>
  <div>
    <a href="http://www.baidu.com" @click="showInfo">点我提示信息</a>
  </div>
</template>

<script>
export default {
  name:"HelloWorld",
  data(){

  },
  methods:{
    showInfo:function(){
      alert('你好呀，同学！')
    }
  }

}
</script>

<style>

</style>

阻止标签默认行为事件：当我单击a链接后，页面会弹窗，然后会跳转到百度网页，我不想让其跳转页面，该如何解决？我们可以利用修饰符解决这个问题：

给a链接加一个.prevent修饰符：

<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

四、v-model与表单

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

示例代码：

<template>
  <div>
    <input type="text" v-model="msg">
    <h1>{{msg}}</h1>  
  </div>
</template>

<script>
export default {
  name:"HelloWorld",
  data(){
    return{
      msg:"Hello"
    }
  }
}
</script>
<style>
</style>

v-model的三个修饰符：

lazy：失去焦点再收集数据。
number：输入字符串转为有效的数字。
trim：输入首尾空格过滤。

v-model在表单应用的实例代码：

<template>
  <div>
   <form>
     账号：<input type="text" v-model.trim="account"> <br/><br/>
     密码：<input type="password" v-model="password"> <br/><br/>
     年龄：<input type="number" v-model.number="age"> <br/><br/>
      性别：
      男<input type="radio" name="sex" v-model="sex" value="male">
      女<input type="radio" name="sex" v-model="sex" value="female"> <br/><br/>
      爱好：        
       学习<input type="checkbox" v-model="hobby" value="study">
       打游戏<input type="checkbox" v-model="hobby" value="game">
       吃饭<input type="checkbox" v-model="hobby" value="eat">
        <br/><br/>
       所属校区
      <select v-model="city">
        <option value="">请选择校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
        <option value="wuhan">武汉</option>
      </select>
       <br/><br/>
      其他信息：
      <textarea v-model.lazy="other"></textarea> <br/><br/>       
      <input type="checkbox" v-model="agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
      <button>提交</button>                  
   </form>
  </div>
</template>

<script>
export default {
  name:"HelloWorld",
  data(){
    return{
      account:'',
	  password:'',
	  age:18,
	  sex:'female',
	  hobby:[],
	  city:'beijing',
	  other:'',
	  agree:''
    }   

  }
}
</script>

<style>

</style>

vimodel收集表单数据小结：

   若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

   若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

   若：<input type="checkbox"/>

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

        2.配置input的value属性:

              (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）。

(2)v-model的初始值是数组，那么收集的的就是value组成的数组。

wanglingli95

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js指令

一、条件渲染指令条件渲染指令主要包括：v-if、v-else、v-show指令。1.1 V-if 指令语法：v-fi=' 表达式 '根据表达式结果的真假来确定是否显示当前元素，如果表达式为true，显示该元素；如果表达式为false，则隐藏该元素。示例代码(HelloWord.vue)：<template> <div class="hello"> <h1 v-if="isShow">表达式的值为真就能显示</h1> &
复制链接

扫一扫