【Vue】Vue框架的基础知识强化

1、插值、表达式

<h1>{{ msg }}</h1> //插值
<h1 :id="idName">{{ flag ? 'no1' : 'yes1' }}</h1>  //动态属性、表达式
<div v-html="htmlContent"></div> //v-html
<!-- v-html will override element children -->
<!-- v-html 有 xss 风险，慎用 -->

2、watch、computed

const num = ref(100)
const doubleNum = computed(() => {return num.value * 2
})
const doubleNum2 = computed({get () {return num.value * 4},set (value) {num.value = value / 2}
})