首頁  >  文章  >  web前端  >  Vue3中的模板語法和vue指令怎麼使用

Vue3中的模板語法和vue指令怎麼使用

王林
王林轉載
2023-05-18 15:49:061080瀏覽

1 模板內插語法

  • 在script 宣告一個變數可以直接在template 上使用用法為{{變數名稱}}

  • ##模板語法是可以編寫條件運算的

  • 運算也是支援的

  • #操作API 也是支援的

    ##
    <template>
      {{ message }}
        {{ message2==0 ? &#39;我是老大&#39; : &#39;我笑的&#39; }}
        {{ message2 + 1 }}
        {{ message.split(&#39;&#39;).map(v => `4546$v`) }}
    </template>
    
    <script setup lang="ts">
    const message = "我是唐少"
    const message2:number = 1
    </script>
    <style>
    </style>
  • 2 指令

    v- 開頭都是vue 的指令
  • v-text 用來顯示文字
  • v-html 用來展示富文本
  • v-if 用來控制元素的顯示隱藏(切換真假DOM)
  • v-else-if 表示v-if 的「else if 區塊」。可以鍊式呼叫
  • v-else v-if條件收尾語句
  • v-show 用來控制元素的顯示隱藏(display none block Css切換)
  • v-on 簡寫@ 用來給元素添加事件
  • v-bind 簡寫: 用來綁定元素的屬性Attr
  • v-model 雙向綁定
  • #v-for 用來遍歷元素
  • v-on修飾符

冒泡案例:

<template>
  <div @click="parent">parent
    <div @click.stop="child">child</div>
  </div>
</template>
  
<script setup lang="ts">
const child = () => {
  console.log(&#39;child&#39;);
 // 点击后不会答应parent,因为被阻止了
}
const parent = () => {
  console.log(&#39;parent&#39;);
}
  
</script>

阻止表單提交案例:

<template>
  <form action="/">
    <button @click.prevent="submit" type="submit">submit</button>
  </form>
</template>
<script setup lang="ts">
const submit = () => {
  console.log(&#39;child&#39;);
  
}
</script>
<style>
</style>

v-bind 綁定class 案例1:

<template>
  <div :class="[flag ? &#39;active&#39; : &#39;other&#39;, &#39;h&#39;]">456789</div>
</template>
<script setup lang="ts">
const flag: boolean = false;// 改成true后切换不同的效果
</script>
  
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-bind 綁定class 案例2:

<template>
  <div :class="flag">{{flag}}</div>
</template>
 // 直接绑定cls
<script setup lang="ts">
type Cls = {
  other: boolean,
  h: boolean
}
const flag: Cls = {
  other: false,
  h: true
};
</script>
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-bind 綁定style案例:

<template>
  <div :>绑定style</div>
</template>
<script setup lang="ts">
type Style = {
  height: string,
  color: string
}
const style: Style = {
  height: "300px",
  color: "blue"
}
</script>
<style>
</style>

v-model 案例:

<template>
  <input v-model="message" type="text" />
  <div>{{ message }}</div>
</template>
<script setup lang="ts">
import { ref } from &#39;vue&#39; // 实时监听
const message = ref("message")
</script>
  
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

以上是Vue3中的模板語法和vue指令怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:yisu.com。如有侵權,請聯絡admin@php.cn刪除