vue-常用指令汇总

最新推荐文章于 2020-04-24 10:20:05 发布

JinweiChang

最新推荐文章于 2020-04-24 10:20:05 发布

阅读量111

点赞数

本文链接：https://blog.csdn.net/weixin_39934264/article/details/105503806

版权

<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8">
        <title>vue1</title>
        <script src="vue.js"></script>
        <link rel="stylesheet" type="text/css" href="vue.css">
    
    </head>
    <body>
        
        <div id="app">

            <!-- 插值表达式 -->
            <div>{{msg}}</div>
            <!-- model与元素双向绑定 -->
            <input type="text" v-model="msg"/>            
            <!--将变量的值渲染到元素中 -->
            <h1 v-text="msg"></h1>
            <!-- 输出原生的html -->
            <div v-html="html"></div>
            <!-- 绑定元素的属性 -->
            <a v-bind:href="url">百度</a>


            <!--v-if和v-show都可以控制渲染或隐藏，v-show为false只是(加了属性display:none)不显示但是DOM节点是存在的，而v-if为falseDOM节点是不存在的  -->
            <div v-if="flag">
                我是if
            </div>
            <div v-else>
                我是else
            </div>
            <div v-show="flag">我是v-show</div>


            <!-- 循环渲染 -->
            <ul>
                <li v-for="item of list">{{item}}</li>
            </ul>


            <!-- "v-on：时间类型"监视事件，简化为 "@事件类型" -->
            <button @click="click">按钮</button>



        </div>    
        
       <script>
            var app=new Vue({
                el:"#app",
                data:{
                    flag:true,
                    msg:'jinweichang',  
                    html:`<h1>v-html</h1>`,
                    url:"http://www.baidu.com",
                    list:["list111","list222","list333"]           
                },
                methods:{
                    click:function(){
                        console.log("按钮被点击了")
                    }
                }
 
                
            })        
        </script>
    </body>
</html>

JinweiChang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-常用指令汇总

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue1</title> <script src="vue.js"></script> ...
复制链接

扫一扫