vue学习进阶之路-4.vue指令

最新推荐文章于 2024-05-19 17:56:48 发布

原创最新推荐文章于 2024-05-19 17:56:48 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文深入解析Vue.js中关键指令的使用方法，包括v-bind、v-on、v-text、v-html、v-model、v-once、v-if和v-for。通过实例展示了如何绑定属性、事件，实现数据双向绑定及条件渲染等，是理解Vue.js动态特性的入门指南。

vue指令

v-bind

用于绑定属性

<input type="text" v-bind:value="str">
<!-- 可简写为 -->
<input type="text" :value="str">

v-on

用于绑定事件

<template>
  <div id="app">
    <button  v-on:click="clickmethod" >v-on指令</button>
    <button  @click="clickmethod" >v-on指令简写</button>
  </div>
</template>
<script>
export default {
  methods:{
    clickmethod(){
      alert(123);
    }
  }
}
</script>
// 样式
<style>
</style>

v-text v-html

<template>
  <div id="app">
    <div v-text="str"></div>
    <div v-html="str"></div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      str:"<input type='text'>"
    }
  }
}
</script>
// 样式
<style>
</style>

在这里插入图片描述

数据双向绑定v-model

<template>
  <div id="app">
    <input type="text" v-model="str">
    <div v-text="str"></div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      str:"<input type='text'>"
    }
  }
}
</script>
// 样式
<style>
</style>

当输入框的值变化时，v-text的展示div也会跟着变化。说的就是mvvm。
在这里插入图片描述

v-once

可以插入，但是不更新数据

<template>
  <div id="app">
    <input type="text" v-model="str">
    <div v-text="str"></div>
    <div v-once><div v-text="str"></div></div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      str:"<input type='text'>"
    }
  }
}
</script>
// 样式
<style>
</style>