2.Vue3模板语法

最新推荐文章于 2024-08-20 09:06:10 发布

Automatic_tester

最新推荐文章于 2024-08-20 09:06:10 发布

阅读量78

点赞数 1

分类专栏： Vue学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41891186/article/details/130341161

版权

Vue学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了Vue3的模板语法，包括v-text用于文本绑定，v-html用于渲染HTML，v-bind用于动态绑定属性，v-if/v-else用于条件渲染，v-show实现元素的显示隐藏，以及v-for用于数组遍历和动态绑定。在使用v-html时需注意XSS攻击风险，而v-if和v-show的选择则取决于性能需求。

摘要由CSDN通过智能技术生成

v-text：它用于将元素的文本内容与指令的表达式绑定，表达式的结果会更新到元素的文本中。使用时需要注意，该指令覆盖了所有的文本节点，如果在同一元素上应用多个指令，后面的指令会覆盖前面的指令。
v-html：它是将元素的 innerhtml 与指令的表达式绑定，表达式的结果会渲染为 html。使用时需要注意，由于存在 xss 攻击风险，所以只应在可信赖的内容上使用。
v-bind：它可以用来动态地绑定 html 特性或组件实例的属性（比如 class 或 style）。
v-if：它用于根据表达式的值来条件性地渲染一个块。如果表达式返回 falsy 值，则不渲染这个块，否则渲染并且保留原先的元素及其子元素，切换时有一定消耗。
v-show：它用于根据表达式的值来切换元素的显示和隐藏状态，不同于 v-if 的是，v-show 仅仅是 css 显示/隐藏，开销比 v-if 小。
v-else：它必须跟在 v-if 或者 v-show 指令之后使用，表示如果条件不成立则渲染它。
v-for：它可以将一个数组循环遍历，并在每项数据上执行相应的操作，比如添加到页面中。元素的属性绑定可以使用 : 符号来指定动态属性。

<template>
    <h1>你好</h1>
    <p v-text="age"></p>
  <!-- v-text的简写 -->
    <p>{{ name }}</p>
  <!-- v-html -->
  <!-- 直接写不生效,使用v-html则生成斜体字 -->
    <p>{{ info }}</p>
    <p v-html="info"></p>
  <!-- v-bind:属性名="变量名" 绑定动态的标签属性  简写  :属性名="变量名" -->
    <p v-bind:data="dataVal">我的属性data</p>
  <!-- class类名绑定 可以叠加使用 -->
    <p :class="{'red':isRed}">我是红色</p>
  <!-- 判断语句 v-if false的时候,是元素未渲染在页面-->
  <!-- v-show    false的时候,是样式的影藏-->
    <p v-if="isTure">我是if存在</p>
    <p v-show="isTure">我是show展示</p>
  <!-- 如果false展示if 否则展示else-->
    <p v-if="isFalse">展示if</p>
    <p v-else>展示else</p>
  <!-- for循环 -->
    <ul>
        <!-- 循环此数组userList-->
        <!-- v-for=(每一个对象,下标)in 数组-->
        <li v-for="(item,index) in userList" :key="index">
            姓名:{{ item.username }}
            年龄:{{ item.age }}
        </li>
    </ul>

</template>

<script>
import {reactive, toRefs} from "vue"

export default {
    name: "home",
    setup() {
        //beforeCreate和created两个生命周期
        const data = reactive({
            name: "xzh",
            age: 20,
            info: "<i>斜体字</i>",
            dataVal: 20,
            isRed: true,
            isTure: true,
            isFalse: false,
            userList: [
                {username: '小红', age: 20},
                {username: '小橙', age: 21},
                {username: '小黄', age: 22},
                {username: '小绿', age: 20},
                {username: '小青', age: 21},
                {username: '小蓝', age: 22},
            ]
        })
        return {...toRefs(data)}//不用toRefs则用{{data.name}} ,用了则直接用{{name}}
    }
}
</script>
<style>
.red {
    color: red
}
</style>

效果