投稿
  1. 首页
  2. html-js-css

VUE -->html

15寸显示器 • 2022-5-26 • html-js-css • 阅读 14

VUE -->html,第1张

概述<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> .a{ width:100px; height:100px 
<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <script src="vue.Js"></script>
    <style>
        .a{
            wIDth:100px;
            height:100px;
            background:red;
        }
        .b{
            wIDth:100px;
            height:100px;
            background:yellow;
        }
    </style>
</head>
<body>
    <div ID="dd">
        <!--v-bind:class=‘cla‘:通过vue给div绑定一个class属性，
        属性值是vue对象的data中cla对应的值-->
        <div v-bind:>{{con}}</div>
        <input type="button" @click="fn" value="兄弟请点我">
    </div>
</body>
<script>
    var vm = new Vue({
        el:‘#dd‘,
        data:{
            con:123,
            cla:‘a‘
        },
            methods:{
                fn:function () {
                    this.cla=‘b‘
                }
            }
    })
</script>
</HTML>






<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <script src="vue.Js"></script>
</head>
<body>
<div ID="dd">
    <!--将值绑定进入data-->
    <!--data中所有数据的格式都是  名：值  的形式-->
    <!--v-model=‘a‘ 给这个数据取名为‘a‘-->
    <input type=‘text‘ v-model="a">
    <!--给按钮绑定点击事件-->
    <!--‘v-on:click‘=‘fn‘:当这个按钮被点击的时候执行方法fn-->
    <!--fn方法具体长什么样，在vue对象的methods中规定-->
    <input type="button" value="提交" v-on:click="fn">
    <ul>
        <!--遍历vue对象中arr里面的数据-->
        <!--con代表arr中的每一个值，有一个值就创建一个li,并且把此时的值放入li中-->
        <li v-for="con in arr">{{con}}</li>
    </ul>
</div>
</body>
<script>
    //声明一个vue对象
    var vm = new Vue({
        //接管区域，冒号前不变后边跟着ID名
        el:‘#dd‘,
        //接管区域内用到的数据
        data:{
            arr:[]
        },
       //通过vue绑定的方法
        methods:{
            fn:function () {
                //把a的值添加进arr中
                //alert(this.a)
                this.arr.push(this.a)
                //将a的值赋值为空字符串（清空）
                this.a=‘‘
            }
        }

    })
</script>
</HTML>


<!--模板语法补充-->

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <script src="vue.Js"></script>
</head>
<body>
    <div ID="div1">
        <div>{{con}}</div>
        //获取的值
        <div v-text="con"></div>
        <!--字符串拼接-->
        <div v-HTML="con"></div>
    </div>

</body>
<script>
    //div.INNERHTML=‘hello world‘
    //声明一个vue对象，在里面进行vue的 *** 作
    var div1=new Vue({
        //vue对象的接管区域
        el:‘#div1‘,
        // *** 作的数据
        data:{
            //con:‘<h1>hello world</h1>>‘
            //con:‘<h1>100</h1>‘
            con:‘100‘+5
        }
    })
    //模板语法
    //data里面的数据，根据键名到页面上对号入座

</script>
</HTML>


<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <script src="vue.Js"></script>
</head>
<body>
    <div >{{con}}</div>
    <div >{{con}}</div>
</body>
<script>
    //标签尽管用相同的类名，vue也只认第一个
    var dd=new Vue({
        el:‘.dd‘,
        data:{
            con:‘123‘
        }
    })
</script>
</HTML>

<!--模板语法-->



<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <script src="vue.Js"></script>
</head>
<body>
<div ID="dd">
    <input type="button" v-on:click="fn" value="d框输出123">
    <input type="button" v-on:click="fn1" value="d框输出345">
</div>
</body>
<script>
    var dd=new Vue({
        el:‘#dd‘,
        methods:{
            fn:function () {
                alert(123)
            },
            fn1:function () {
                alert(345)
            }
        }
    })
</script>
</HTML>


<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <script src="vue.Js"></script>
</head>
<body>
    <!--<ul ID="uu">-->
        <!--<li>{{con1}}</li>-->
        <!--<li>{{con2}}</li>-->
        <!--<li>{{con3}}</li>-->
        <!--<li>{{con4}}</li>-->
    <!--</ul>-->
    <ul ID="uu">
        <li v-for="con in arr">{{con}}</li>
    </ul>
</body>
<script>
    var uu=new Vue({
        el:‘#uu‘,
        data:{
            arr:[111,222,333,444]
//            con1:‘111‘,
//            con2:‘day2‘,
//            con3:‘333‘,
//            con4:‘444‘
        }
    })
</script>
</HTML>

<!--渲染-->




<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <style>
        .c1{
            background:red;
        }
        .c2{
            background:yellow;
        }
        .c3{
            background:green;
        }
    </style>
</head>
<body>
<table border="1" cellspacing="0">
    <tr >
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>

    <tr >
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>

    <tr >
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>
</body>
</HTML>





<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <style>
        .c1{
            background:red;
            wIDth:1000px;
            height:50px;
        }
        .c2{
            background:yellow;
            wIDth:1000px;
            height:50px;
        }
        .c3{
            background:black;
            wIDth:1000px;
            height:50px;
        }
        span{
            background:green;
            wIDth:1000px;
            height:1000px;
        }
    </style>
</head>
<body>
    <ul>
        <li >1</li>
        <li >2</li>
        <li >3</li>
        <li >4</li>
        <li >5</li>
    </ul>
    <span>
        1810a
    </span>
</body>
</HTML>


<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <script src="vue.Js"></script>
</head>
<body>
<div ID="dd">
    <input type="button" value="提交" @click="fn">
    <span>反转前:</span>{{str1}}<br>
    <span>反转后:</span>{{str2}}
</div>
</body>
<script>
    var vm=new Vue({
        el:‘#dd‘,
        data:{
            str1:‘python是最好的语言‘
        },
        computed:{
            str2:function () {
                return this.str1.split(‘‘).reverse().join(‘‘)
            }
        }
    })
</script>
</HTML>




<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
</head>
<body>
<form action="" method="get">
    <input type="text">
    <input type="password">
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女

    <input type="checkBox">吃饭
    <input type="checkBox">睡觉
    <input type="checkBox">打豆豆

    <input type="submit" value="提交">
    <input type="button" value="按钮">
    <input type="reset" value="重置按钮">
</form>
</body>
</HTML>






<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <style>
        #d1{
            background:red;
            wIDth:200px;
            height:50px;
        }
        #d2{
            background:red;
            wIDth:200px;
            height:50px;
        }
        #d3{
            background:red;
            wIDth:200px;
            height:50px;
        }
        .c1{
            background:yellow;
            wIDth:200px;
            height:50px;
        }
        div{
            background:green;
            wIDth:200px;
            height:50px;
        }

    </style>
</head>
<body>
    <div ID="d1">1810a</div>
    <div ID="d2">1810a</div>
    <div ID="d3">1810a</div>
    <div >1810a</div>
    <div >1810a</div>
    <div >1810a</div>
    <div>1810a</div>
    <div>1810a</div>
    <div>1810a</div>
</body>
</HTML>



<!DOCTYPE HTML><HTML lang="en"><head>    <Meta charset="UTF-8">    <Title>Title</Title>    <style>        .c1{            background:red;            wIDth:100px;            height:100px;        }        .c2{            background:yellow;            wIDth:200px;            height:200px;        }    </style></head><body>    <!--<div ID="d1" >1810a</div>-->    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>    </ul></body> <script>    //如何获取标签     //方式1，用ID    //d1.INNERHTML=‘1810a班是最牛的班级‘   //d框输出   //alert(123)     //交互输入//     var a=prompt(‘请输入一句话‘)//     //alert(a)//     d1.INNERHTML=a//     d1.style.background=‘yellow‘//     d1.style.height=‘500px‘//    //修改类名//     d1.classname=‘c2‘;     var arr=document.getElementsByTagname(‘li‘)     alert(arr[2].INNERHTML)     for(var i=0;i<=5;i++){         alert(arr[i].INNERHTML)     } </script></HTML>
总结

以上是内存溢出为你收集整理的VUE -->html全部内容，希望文章能够帮你解决VUE -->html所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1075556.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
15寸显示器 15寸显示器 一级用户组
0 0
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表（0条）

保存