【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
  }
})