VUE基础使用

最新推荐文章于 2024-07-15 17:15:41 发布

Ryan_yan1

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量277

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44706011/article/details/124630404

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

VUE基础使用

<html>
    <head>
        <title>
            VUE基础
        </title>
        <style>
            .active{
                border: 1px solid red;           
            }
        </style>
    </head>

<body>
    <div id="app">
        {{ message }}
        <h2>
            {{ school.name }}
            {{school.mobile }}
        </h2>
        <ul>
            <li>
                {{ campus[0] }}
            </li>
            <li>
                {{ campus[1] }}
            </li>
        </ul>
        <h2 v-text="message+'!!!!'">
        </h2>
        <p v-html="content"></p>
        <!-- v-on:click @click 点击事件 -->
        <input type="button" value="v-on指令" v-on:click="doIT">
        <input type="button" value="v-on简写" @click="doIT">
        <input type="button" value="双击事件" @dblclick="doIT">
        <div class="input-num">
            <button @click="sub">-</button>
            <span>{{ num }}</span>
            <button @click="add">+</button>
        </div>

        <input type="button" value="切换显示状态" @click="changeIsShow">
        <img v-show="isShow" src="./img/123.png" alt="">
        <img v-show="num>=7" src="./img/123.png" alt="">
        
        <p v-if="isShow">合肥</p>
        <!-- v-show和v-if的区别,v-show只是修改display，v-if直接把html代码给去除了 -->
        
        <!-- v-bind 设置元素属性 -->
        <img v-bind:src="imgSrc" alt="">
        <img :src="imgSrc" alt="" :title="isTitle"
        :class="isActive?'active':''" @click="toggleActive">
        <br>
        
        <!-- 简写 class可以用对象的方式 -->
        <img :src="imgSrc" alt="" :title="isTitle"
        :class="{active: isActive}" @click="toggleActive">
        
        <!--轮播图-->
        <img :src="imgArr[index]" alt="" />
        <a href="javascript:void(0)" class="left" v-show="index!=0" @click="prev">
            上一张
        </a>
        <a href="javascript:void(0)" class="right" v-show="index<imgArr.length-1" @click="next">
            下一张
        </a>

        <!-- v-for -->
        <ul>
            <li v-for="(item,index) in arr">
                {{ item }}{{ index }}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{ item.name }}
        </h2>
        <input type=" " value="添加数据" @click="arr_add">
        <input type="button" value="删除数据" @click="remove_arr"> 
        
        <!-- v-on传递自定义参数，事件修饰符 -->
        <!-- 事件修饰符地址： https://cn.vuejs.org/v2/api/#v-on -->
        <input type="button" value="点击" @click="on_doit(666)">
        <input type="text" @keyup.enter="sayHi">  <!--回车触发-->
        <br>

        <!-- v-model 双向数据绑定 -->
        <input type="text" v-model="model_text" @keyup.enter="getM">
        <h2>{{ model_text }}</h2>
    
    
    </div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message:"Hello Vue",
            school:{
                name: "三中",
                mobile: "123456"
            },
            campus: ["北京", "合肥"],
            content: "<a href='www.baidu.com'>严旭</a>",
            num: 1,
            isShow: false,
            imgSrc: "https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel5.png",
            isTitle: "测试地址说明",
            isActive: false,
            imgArr: ["./img/DSC_1595.JPG",
            "./img/DSC_1597.JPG",
            "./img/DSC_1598.JPG",
            "./img/DSC_1602.JPG",
            "./img/DSC_1604.JPG"
        ],
            index: 0,
            arr: [1,2,3,4,5,6],
            vegetables:[
                {name: "西红柿炒鸡蛋"},
                {name: "可乐鸡翅"}
            ],
            model_text: "双向绑定数据测试"


        },
        methods:{
            doIT:function(){
                alert("123")
            },
            add:function(){
                // console.log("add")
                if(this.num<10){
                    this.num++;
                }else{
                    alert("别点了，最大值10")
                }
    
            },
            sub:function(){
                // console.log("sub")
                if(this.num>0){
                    this.num--;
                }else{
                    alert("已经到最小值了")
                }
            },
            changeIsShow:function(){
                this.isShow=!this.isShow
            },
            toggleActive:function(){
                this.isActive=!this.isActive
            },
            prev:function(){
                this.index--;
        },
            next:function(){
                this.index++;
        },
        arr_add:function(){
            this.vegetables.push({name: "土豆丝"})
        },
        remove_arr:function(){
            this.vegetables.shift()
        },
        on_doit:function(p1){
            console.log(p1)
        },
        sayHi:function(){
            alert('xxxxx')
        },
        getM:function(){
            alert(this.model_text)
        },
    },
});
</script>
  </html>

Ryan_yan1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE基础使用

VUE基础使用<html> <head> <title> VUE基础 </title> <style> .active{ border: 1px solid red; } </style> </head><bo
复制链接

扫一扫