Vue reactive ref v-bind 语法示例演示代码

<script setup> // 1. 声明式渲染，对象和变量的声明（reactive()和ref()） import { ref,reactive,computed, onMounted, watch } from 'vue' // reactive() 对象声明API，创建对象 const counter = reactive({ count:0 }) console.log(counter.count) counter.count++ // ref() 变量声明API， 可接受任何类型，会返回一个包裹对象，在.value属性下暴露内部值 const message = ref('hello') console.log(message.value) message.value = 'Changed libai sssss' // 在组件<script setup>块中声明的，可在模板<template>中直接使用 // ------------------------------------------------- // 2. Attribute绑定，attribute绑定一个动态值 使用v-bind:属性="值"，还有一个简写用法，就是将v-bind省略，以:开头 const titleClass = ref('title') </script> <template> <!-- 1. --> <div id="d-count"> <h2>1. 声明式渲染，对象和变量的声明（reactive()和ref()）</h2> <button id="btn-count" @click='counter.count++'>{{ counter.count }}</button> <br> {{counter.count}} <p>{{counter.count}}</p> <!-- 在花括号中的内容可以是js的表达式 --> <button type="text" id="btn-js">{{message.split(" ").reverse().join("")}}</button> </div> <br> <br> <br> <!-- 2. --> <div id="d-vbind"> <h2>2. Attribute绑定</h2> <h1 id="h-class" v-bind:class="titleClass">make me green</h1> <!-- <h1 :class="titleClass">make me green</h1> --> </div> <br> <br> <br> </template> <style scoped> /* 1. */ #btn-count{ height: 50px; width: 400px; text-align: center; background-color: aqua; font-size: 30px; } #btn-js{ height: 50px; width: 400px; text-align: center; background-color: salmon; font-size: 30px; } /* 2. */ #h-class{ height: 50px; width: 400px; text-align: center; background-color: darkmagenta; font-size: 25px; } </style>