Vue.js 条件和循环



Vue.js 条件和循环

在所有编程语言中都使用条件和循环来提供重复的控制结构。他们可以根据条件重复一个或多个步骤。在
Vue.js 的情况下也可以使用。

v-if指令示例

Index.html文件:
 <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
<span v-if="seen">This is visible to you</span>
        </div>
        <script src="index.js"></script>
    </body>
</html>

Index.js文件:
 var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

注意: 在这里,我们使用了一个简单的CSS文件来使输出更具吸引力。以下所有示例的CSS文件都相同。
Index.css文件:
 html, body {
    margin: 5px;
    padding: 0;
}

输出:
 This is visible to you

Vue.js 条件和循环_https://bianchenghao6.com_【vue教程】_第1张

在上述示例中,如果输入
app3.seen = false ,您会看到消息消失。

示例2:

Index.html文件:
 <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
<span v-if="seen">This is visible to you</span>
        </div>
        <script src="index.js"></script>
    </body>
</html>

Index.js文件:
 var app = new Vue({
  el: '#app',
  data: {
    seen: false
  }
})

输出:

Vue.js 条件和循环_https://bianchenghao6.com_【vue教程】_第2张

在上面的示例中,您可以看到不仅可以将数据绑定到文本和属性,还可以将其绑定到DOM的结构。 Vue还提供了功能强大的过渡效果系统,当Vue插入,更新或删除元素时,该系统可以自动应用过渡效果。

v-else-if指令示例

在上面的示例中,我们可以使用v-else-if指令提供else功能。通过使用此伪指令,如果不满足条件或不满足条件,则它将返回您为程序设置的else语句。让我们看一个例子。
Index.html文件:
 <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <span v-if="seen">Now you see me</span>
            <span v-else-if=>You can't see me </span>
        </div>
        <script src="index.js"></script>
    </body>
</html>

Index.js文件:
 var app = new Vue({
  el: '#app',
  data: {
    seen: false
  }
})

输出:
 You can't see me

Vue.js 条件和循环_https://bianchenghao6.com_【vue教程】_第3张

在上面的示例中,您可以看到输出显示为"您看不到我",并将其设置为v-else-if语句。 Vue.js中还有一些其他指令可。其自身的特殊功能。

v-for指令示例

v-for指令是。使用数组中的数据显示项目列表。请参见以下示例。
Index.html文件:
 <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
        <script src="index.js"></script>
    </body>
</html>

Index.js文件:
 var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'HTML 教程' },
      { text: 'CSS 教程' },
      { text: 'JavaScript 教程' },
      { text: 'AngularJS 教程' },
      { text: 'Vue.js 教程' }
    ]
  }
})

输出:
  HTML 教程  CSS 教程  JavaScript 教程  AngularJS 教程  Vue.js 教程 

输出:

Vue.js 条件和循环_https://bianchenghao6.com_【vue教程】_第4张

处理用户输入

v-on指令有助于用户与您的Vue.js应用进行交互。它。附加在Vue实例上调用方法的事件侦听器。让我们看一下v-on指令的示例。

v-on指令示例

Index.html文件:
 <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">Click Here to Reverse Message</button>
        </div>
        <script src="index.js"></script>
    </body>
</html>

Index.js文件:
 var app = new Vue({
  el: '#app',
  data: {
    message: 'This is Vue.js Example!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

输出:

Vue.js 条件和循环_https://bianchenghao6.com_【vue教程】_第5张

单击"单击此处以反转消息"按钮后,以上字符串将被反转。

Vue.js 条件和循环_https://bianchenghao6.com_【vue教程】_第6张

在上面的示例中,无需触摸DOM即可更新应用程序。所有DOM操作都由Vue本身处理。

v-model指令示例

v模型指令。在表单输入之间进行双向数据绑定。和应用状态。请参见以下示例:
Index.html文件:
 <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
        <script src="index.js"></script>
    </body>
</html>

Index.js文件:
 var app6 = new Vue({
  el: '#app',
  data: {
    message: 'Two way data binding!'
  }
})

输出:

Vue.js 条件和循环_https://bianchenghao6.com_【vue教程】_第7张

在上面的示例中,您将看到数据的自动同步。当您更改一个组件中的数据时,更改将反映在两个组件中。参见以下示例:

Vue.js 条件和循环_https://bianchenghao6.com_【vue教程】_第8张

组件化

当我们要构建由小型,独立且经常可重复使用的组件组成的大规模应用程序时,将使用组件系统。大型应用程序接口可以抽象为组件树:

Vue.js 条件和循环_https://bianchenghao6.com_【vue教程】_第9张

在这里,我们使用v-bind指令在重复的组件中传递值。请参见以下示例:
Index.html文件:
 <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
  <ol>
    <todo-course
      v-for="course in courseList"
      v-bind:todo="course"
      v-bind:key="course.id"
    ></todo-course>
  </ol>
</div>
        <script src="index.js"></script>
    </body>
</html>

Index.js文件:
 Vue.component('todo-course', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
  el: '#app',
  data: {
    courseList: [
      { id: 0, text: 'Java' },
      { id: 1, text: 'PHP' },
      { id: 2, text: 'Angular' },
      { id: 3, text: 'Vue.js' }
    ]
  }
})

输出:

Vue.js 条件和循环_https://bianchenghao6.com_【vue教程】_第10张