vue 指令 -4

作者：小恺

2022 年 6 月 08 日
本文字数：1131 字
阅读完需：约 4 分钟

v-for 与 v-if 一同使用

当 v-for 和 v-if 一起使用时，v-for 的优先级比 v-if 要高，这意味着 v-if 将分别重复运行与每个 v-for 循环中。如果在渲染一个列表时，对列表中的某些项需要根据条件来判断是否渲染，那么就可以将 v-if 和 v-for 一起使用

演示代码：

<template>  <div id="app">    <h1>已完成</h1>    <ul>      <li v-for="plan in plans" v-if="plan.iscomplete">{{plan.content}}</li>    </ul>    <h1>未完成</h1>    <ul>      <li v-for="plan in plans" v-if="!plan.iscomplete">{{plan.content}}</li>    </ul>    <router-view />  </div></template><script>export default {  name: 'App',  data() {    return {      plans: [        {          iscomplete: false,          content: '买菜'        },        {          iscomplete: true,          content: '学vue'        },        {          iscomplete: true,          content: '打羽毛球'        },        {          iscomplete: false,          content: '做饭'        }      ]    }  }}</script>

复制代码

运行结果：

注意如果只是要根据某条件的真假来判断是否要跳过整个循环的执行可以将 v-if 置于外层元素上

v-bind 指令

v-bind 指令主要用于响应更新 HTML 元素的属性，将一个或者多个属性或者一个组件的 prop 动态绑定到表达式

演示代码：

<template>  <div id="app">    <a v-bind:href="juejin">掘金 </a><br>    <a :href="'http//'+filename">火狐 </a><br>    <a :[attrname]="url">百度 </a><br>  </div></template><script>export default {  name: 'App',  data() {    return {      attrname: 'href',      juejin: 'https://juejin.cn/',      url: 'http://www.baidu.com',      filename: 'home.firefoxchina.cn/'    }  }}</script>

复制代码

运行结果

代码<a v-bind:href="juejin">掘金 </a>是绑定一个属性；

<a :href="'http//'+filename">火狐 </a>:href 是 v-bind:href 的缩写,这里用的是内联字符串拼接；

<a :[attrname]="url">百度 </a>:[attrname]是动态属性名

v-model 指令

v-model 指令用来在表单<input>、<textarea>、<select>元素上创建双向数据绑定，他会根据控件类型自动选取正确的方法来更新元素。但 v-model 本质上不过是语法糖，他负责监听用户的输入事件以更新数据，并对一些极端场景进行特殊处理

演示代码：

<template>  <div id="app">    <p>{{message}}</p>    <input type="text" v-model="message">  </div></template><script>export default {  name: 'App',  data() {    return {      message: 'hello world'    }  }}</script>

复制代码

运行结果

在表单输入的内容<p>标签的内容也会实时更新

发布于: 刚刚阅读数: 4

小恺

关注

还未添加个人签名 2021.02.22 加入

还未添加个人简介

发布

暂无评论

创作场景

vue 指令 -4

v-for 与 v-if 一同使用

v-bind 指令

v-model 指令

小恺

评论