Vue的demo

KKAming

已于 2024-04-01 15:17:23 修改

阅读量97

点赞数 3

文章标签： vue.js javascript 前端

于 2024-01-28 06:18:07 首次发布

本文链接：https://blog.csdn.net/2301_78263022/article/details/135891437

版权

常见功能

标签	功能
v-bind	用于绑定标签元素直接使用 " : " 也可以
v-on	@事件 = "方法名"
v-show	显示和隐藏布尔类型来控制
v-if	删除和隐藏
v-model	双向绑定

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>基本结构1</title>
</head>
<style>
    .red{
        background-color: red;
        width: 50px;
        height: 50px;

    }

    .yellow{
        background-color: yellow;
        width: 60px;
        height: 20px;
    }

    img{
        width: 50px;
        height: 50px;
    }
</style>
<body>
    <div id="Demo">
        {{myname}}-{{myage}}

        <!-- v-bind用于绑定元素 -->
        <div v-bind:class = "WhichColor"></div>
        <img :src="imgpath"/>

        <!-- @绑定关键字 -->
        <button @click = "handelChange">更改/</button>
        <!-- <button v-on:click = "handelChange"></button> -->

        <!-- v-if v-show 指令 -->
        <div v-show = "IsShow">我时动态显示和隐藏 设置ture则显示 false则隐藏</div> 
        <div v-if = "IsCreate">我时动态删除和隐藏</div>

        <!-- v-for 渲染指令 -->
            <ul>
                <li v-for = "(item,index) in list">
                    {{item}}-{{index}}
                </li>
            </ul>
        
    </div>



    <script>
        var Demo = new Vue({
            //标记元素
            el:"#Demo",

            //填写数据
            data:{
                myname:'AMing',
                myage:100,
                WhichColor:'red',
                imgpath:"",
                IsShow:false,
                IsCreate:false,
                list:['111','222','333']

            },

            //方法
            methods:{
                handelChange(){
                    console.log('handelChange',this)
                    Demo.myname = "kkAming"
                    this.imgpath="https://tuapi.eees.cc/meinv/pc/img120472912047291204729.jpg"
                    //this关键字也可以 如果不给Vue new对象就使用这个
                    this.myage = "18"
                    this.WhichColor = "yellow"
                    this.IsShow = !this.IsShow
                    this.IsCreate = !this.IsCreate
                }
            }
        }) 
    </script>
</body>
</html>

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

    <div class="box">

        <input type="text" v-model = "mytext">
        {{mytext}}
        <button @click = "HandAdd()" >add</button>
        

        <ul v-show="datalist.length">
            <li v-for="(data,index) in datalist" >
                {{data}}
                <button @click = "HandDel(index)">del</button>
            </li>
        </ul>

        <div v-show="!datalist.length">待办事项空空如野</div>

    </div>

    <script src="./vue.js"></script>
    <script>
        var test = new Vue({
            el:'.box',

            data:{
                datalist:["111","222","333"],
                mytext : "",
            },

            methods:{
                
                //增加
                HandAdd(){
                    console.log('加上咯')
                    this.datalist.push(this.mytext)
                    this.mytext = ""    //这里表示清空
                },

                HandDel(index){
                    console.log('丢掉咯')
                    this.datalist.splice(index,1)
                }
            }

        })
    </script>

</body>
</html>