vue课件day01

最新推荐文章于 2024-07-20 14:09:45 发布

zhangli0421

最新推荐文章于 2024-07-20 14:09:45 发布

阅读量202

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/zhangli0421/article/details/120701761

版权

1.插值运算符 {{ }}

    <div id="box">
        {{message}}
    </div>

    <script>
    let vm=new Vue({
        el:"#box",
        data:{
            message:"哈哈",
        }
    })
    </script>

2.vue指令，一般写法 v-xxx

v-html
v-text

    <div id="box">
        <div v-text="name"></div>
        <div v-html="name"></div>
    </div>

    <script>
    let vm=new Vue({
        el:"#box",
        data:{
            message:"可视电话数据库恢复健康都是",
            name:'<h1>床前明月光，疑是地上霜。</h1>'
        }
    })
    </script>

3.绑定事件: v-on:click="函数名" v-show="布尔"

    <div id="app">
        <input type="button" name="" id="" value="点击" v-on:click="change">
        <div v-show="flag" style="width:200px;height:200px;background:red"></div>
    </div>
    <script>
     let vm=new Vue({
         el:"#app",
         data:{
             flag:true,
         },
         methods:{
            change(){
                this.flag=!this.flag;
            }
         }
     })
    </script>