Cara menggunakan sintaks templat dan arahan vue dalam Vue3-View.js-php.cn

Cara menggunakan sintaks templat dan arahan vue dalam Vue3

王林

Lepaskan： 2023-05-18 15:49:06

ke hadapan

1116 orang telah melayarinya

1 Sintaks interpolasi templat

Mengisytiharkan pembolehubah dalam skrip boleh digunakan terus dalam templat menggunakan {{nama pembolehubah}}
templat Sintaks membenarkan anda menulis operasi bersyarat
Operasi turut disokong
API operasi turut disokong

<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>

Salin selepas log masuk

2 Arahan

v- Arahan bermula dengan vue
v-text digunakan untuk memaparkan teks
v-html digunakan untuk memaparkan teks kaya
v-if digunakan untuk mengawal paparan dan menyembunyikan elemen (tukar DOM benar dan palsu)
v-else-if bermaksud "else if block" v-if. Boleh dipanggil dalam rantai
v-else v-jika pernyataan akhir bersyarat
v-show digunakan untuk mengawal paparan dan menyembunyikan daripada elemen (paparkan suis Css tiada blok)
singkatan v-on @ digunakan untuk menambah acara pada elemen
singkatan v-bind: digunakan untuk mengikat elemen Atribut Atribut
v-model dua hala mengikat
v-for digunakan untuk melintasi elemen

pengubah suai v-on

Kes gelembung:

<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>

Salin selepas log masuk

Halang kes penyerahan borang:

<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>

Salin selepas log masuk

Kes kelas mengikat v-bind 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>

Salin selepas log masuk

v-binding class case 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>

Salin selepas log masuk

v-bind style case:

<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>

Salin selepas log masuk

v-model case:

rreee

Atas ialah kandungan terperinci Cara menggunakan sintaks templat dan arahan vue dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!