欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue vuecli4.x使用声明式渲染、条件与循环、事件绑定、双向绑定基础用法

程序员文章站 2022-04-26 14:46:45
...

声明式渲染

<template>
  <div>{{message}}</div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      message: "Hello Vue!"
    };
  }
};
</script>

条件与循环

v-if

<template>
  <div v-if="seen">{{message}}</div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      message: "Hello Vue!",
      seen:true
    };
  }
};
</script>

v-for

<template>
  <div>
      <ul>
        <li v-for="item in todos" :key="item.text">{{ item.text }}</li>
      </ul>
   </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      todos: [
        { text: "学习 JavaScript" },
        { text: "学习 Vue" },
        { text: "整个牛项目" }
      ]
    };
  }
};
</script>

事件绑定

v-on:click或@click

<template>
	<div>{{message}}</div>
	<button v-on:click="reverseMessage">反转消息</button>
 // <button @click="reverseMessage">反转消息</button>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message
        .split("")
        .reverse()
        .join("");
    }
  }
};
</script>

双向绑定

v-model

<template>
  <input v-model="message" />
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      message: ""
    };
  }
};
</script>