Vue3基础

内置指令

v-text

<span v-text="msg"></span>
<!-- 等价于 -->
<span>{
  {msg}}</span>

注意：只能写一行表达式；不能写复杂js  例如if   while

v-html

 <div class="app">
        <p>{
  {msg}}</p>
        <p v-html="msg"></p>
    </div>
<script>
    Vue.createApp({
        data(){
            return{
                msg:"hello~"
            }
        }
    }).mount(".app")
</script>

 属性渲染v-bind

一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

 <div class="app">
        <p v-bind:title="msg">这是p标签</p>
        <p :title="msg">简写:title=" "</p>
        <button :disabled="canUse">按钮</button>
    </div>
<script>
    Vue.createApp({
        data(){
            return{
                msg:"学习vue",
                canUse:false,
            }
        }
    }).mount(".app")
</script>

v-bind:属性名="值"

可以简写为：

:属性名="值"

条件渲染v-if与v-else-if

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

 实例：

 <div class="app">
        <p v-if="isLog">欢迎光临~</p>
        <p v-else>请登录</p>
    </div>
<script>
    Vue.createApp({
        data() {
            return { isLog: false }
        }
    }).mount(".app")
</script>

 在对比一下多重条件渲染 v-else-if

<div class="app">
        <p v-if="sc