1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
| <script setup> import { ref,watchEffect, computed, reactive, watch } from 'vue' const message = ref('Hello World!') const isRed = ref(false) const stats = reactive({}) const props = defineProps({ data: Array, title: String ... }) const emit = defineEmits(['click']) const add = () => { emit('click') } const output = computed(() => marked(input.value)) watchEffect(async () => {})
watch(count, (newValue) => { anotherCount.value = newValue - 1 }) </script>
<template> // 在模板中直接使用变量名即可,不需要写.value,因为在模板中ref自动解包 <view>{{message}}</view> // Attribute绑定 :名称 对象中,变量名(值)与属性名(键)相同的话可以简写,只写其中一个 对象中,类名可以通过布尔值来判断是否显示 <view :class="{ red: isRed }" :style="{ color }" @click="可以放置函数名或简单表达式"></view> // 循环判断 <ul v-if=""> <li v-for="item in 列表" :key="index">{{item}}</li> </ul> <p v-else></p> </template>
|