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>
    <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>标签的内容也会实时更新

vue指令4

点击查看上篇

v-for与v-if一同使用

v-bind指令

v-model指令