vue3常见语法及指令

1.插值

（1）用法：在script声明一个变量可以直接在<template>使用，{{  }}

<template>
	<h1>{{message}}</h1>
</template>

<style scoped>
h1{
	color:red;	
}
</style>

<script setup>
let message="你好，vue3";
</script>

（2）可以编写条件运算表达式

<template>
	<h1>{{msuccess?"成功":"失败"}}</h1>
</template>

<style scoped>
h1{
	color:red;	
}
</style>

<script setup>
const success=true;
</script>

(3)算术运算、比较运算、逻辑运算

<template>
	<h1>{{(num+10)*3}}</h1>
</template>

<style scoped>
h1{
	color:red;	
}
</style>

<script setup>
let num=10;
</script>

(4)调用API

<template>
	<h1>{{ids.split(",")}}</h1>
</template>

<style scoped>
h1{
	color:red;	
}
</style>

<script setup>
let ids="1,2,3,4,5,6";
</script>

2.v-text指令：用来显示文本

<template>
	<h1 v-text="message"></h1>
</template>

<style scoped>
h1{
	color:red;	
}
</style>

<script setup>
conat message="你好，vue3";
</script>

3.v-html

<template>
	<div v-html="message"></div>
</template>

<style scoped>
h1{
	color:red;	
}
</style>

<script setup>
const message="<i style='color:blue;'>你好,vue3</i>";
</script>

4.v-if:控制元素是否渲染，当条件为假时，vue3会在页面对应位置渲染一个v-if注释

<template>
	<div v-if="show">看得到吗</div>
</template>

<style scoped>
h1{
	color:red;	
}
</style>

<script setup>
const show=true;
</script>

5.v-else if:else if块

<template>
	<div v-if="score>=90&&score<100">A</div>
    <div v-if="score>=80&&score<90">B</div>

</template>

<script setup>
const score=60;
</script>

6.v-show:控制元素的显示与隐藏，不会使dom消失

<template>
	<div v-show="show">
    <h1>你好</h1>
    </div>
</template>

<script setup>
const show=false;
</script>

7.v-for:遍历

<template>
	<select name="seasion" id="seasion">
        <option v-for="o in options" v-text="o.text" v-bind:value="o.value"></option>
    </select>
</template>

<script setup>
    const options=[{
        value:1;
        text:"春";
    },{
        value:2;
        text:"夏";
    },{
        value:3;
        text:"秋";
    },{
        value:4;
        text:"冬";
    }];
</script>

8.v-bind:绑定元素属性，可简写为"：xxx"

<template>
	<inout :type="'text'" v-bind:id="id" :name="name">
</template>

<script setup>
    const id="mydiv"
    const name="username"

9.:class使用数组

<template>
	<input :class="classArr">
</template>

<script setup>
    const classArr=["a","b","c"]
</script>

10.:class使用对象

<template>
	<input :class="classObj">
</template>

<script setup>
    const classObj={
        a:true;
        b:true;
        c:false;
    }
</script>