How to use template syntax and vue instructions in Vue3-Vue.js-php.cn

How to use template syntax and vue instructions in Vue3

王林

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

forward

1001 people have browsed it

1 Template interpolation syntax

Declaring a variable in script can be used directly in template using {{variable name}}
template The syntax is that you can write conditional operations
Operations are also supported
Operation API is also supported

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

Copy after login

2 Instructions

v- Instructions starting with vue
v-text is used to display text
v-html is used to display rich text
v-if is used to control the display and hiding of elements (switching true and false DOM)
v-else-if represents the "else if block" of v-if. Can be called in a chain
v-else v-if conditional ending statement
v-show is used to control the display and hiding of elements (display none block Css switch)
v-on abbreviation @ is used to add events to elements
v-bind abbreviation: is used to bind elements Attribute Attr
v-model two-way binding
v-for is used to traverse elements

v-on modifier

Bubble case:

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

Copy after login

Prevent form submission case:

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

Copy after login

v-bind binding class Case 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>

Copy after login

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

Copy after login

v-bind binding 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>

Copy after login

v-model case:

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

Copy after login

The above is the detailed content of How to use template syntax and vue instructions in Vue3. For more information, please follow other related articles on the PHP Chinese website!