刚开始还是会犯错。
在使用条件表达式时，判断条件中，不需要使用插值{{}}包裹。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div id="app">

    <p>{{ title }}</p>

    <p v-show="web.show">ssss</p>

    <p v-if="web.number<=10">10以下</p>
    <p v-else-if="web.number>10&&web.number<=100">10以上,100以下</p>
    <p v-else="web.number>1000">1000以上</p>



    <button @click="toggle">切换显示</button>

</div>

    <script type="module">

        import {createApp,reactive} from './vue.esm-browser.js'

        createApp({
            setup(){

                const web = reactive({
                    show:true,
                    number:100
                })

                const toggle = function(){

                    web.show = !web.show
                }

                return {
                    title:'第八课',
                    web,
                    toggle
                }
            }
        }).mount('#app')



    </script>

    
</body>
</html>

标签: none

评论已关闭