Vue的if，else-if，else，for，css，style等

最新推荐文章于 2024-05-01 01:10:18 发布

Java程序猿哦~

最新推荐文章于 2024-05-01 01:10:18 发布

阅读量1.1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_64896985/article/details/124004209

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <!-- 这样handle1和handle2都会执行 -->
        <div v-on:click="handle1">
            <button v-on:click="handle2">点我五</button>
        </div>
        <!-- 阻止冒泡.stop handle1不会执行 -->
        <div v-on:click="handle1">
            <button v-on:click.stop="handle2">点我五</button>
        </div>
        <!-- prevent阻止默认行为 不会跳转百度 -->
        <a href="http://www.baidu.com" v-on:click.prevent="handle3">百度</a>
        <!-- keyup键盘弹起事件 enter回车键 -->
        <input type="text" v-model="username" v-on:keyup.enter="handle4"/>{{username}}
        <!-- 点击Backspace执行，然后清空 -->
        <input type="text" v-model="pass" v-on:keyup.delete="handle5"/>
        <!-- 自定义按键修饰符 -->
        <input type="text" v-model="pass" v-on:keyup.a="handle6"/>
        <div>
        <!-- 绑定 -->
        <a v-bind:href="test">百度</a>
        <!-- v-bind简写成: -->
        <a :href="test">百度</a>
        </div>
        <div>
            <!-- v-bind和v-on:input来实现v-model这个双向数据绑定 -->
            <input type="text" v-bind:value="info" v-on:input="handel7">{{info}}
        </div>
    </div>
    <script type="text/javascript">
        // 自定义按键修饰符 a
        Vue.config.keyCodes.a=65

      var vm=new Vue({
            el:"#app",
            data:{
                username:"hello",
                pass:"hello",
                test:"http://www.baidu.com",
                info:""
            },
            // 实例方法用methods
            methods: {
                handle1:function(){
                    this.num++;
                },
                handle2:function(){
                    this.num++;
                },
                handle4:function(){
                    console.log(this.username)
                },
                handle5:function(){
                    this.pass="";
                },
                handle6:function(event){
                    console.log(event.target.value);
                    console.log(event.keyCode);
                },
                handel7:function(event){
                    this.info=event.target.value;
                }
            },
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>
    <style type="text/css">
        .active{
           border: 1px solid red; 
           width: 200px;
           height: 200px;
        }
        .error{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- class样式 -->
        <!-- 对象语法 -->
        <!-- active样式 isactive等于true生效 等于flase不生效 -->
        <div v-bind:class="{active:isactive,error:iserror}">
            测试内容
        </div>
        <button v-on:click="handle">切换</button>
        <!-- 数组语法 -->
        <!-- activeClass,errorClass都为值 -->
        <div v-bind:class="[activeClass,errorClass]">
            测试内容
        </div>
        <button v-on:click="handle1">切换1</button> 


        <!-- style样式 -->
        <!-- 对象语法 -->
        <div v-bind:style="{color:'red',border:'1px solid',width:'200px',height:'200px'}">
            测试内容
        </div>
        <button v-on:click="handle2">切换2</button> 

        <div v-bind:style="{color:colorstyle,border:borderstyle}">
            测试内容
        </div>
        <button v-on:click="handle2">切换2</button> 

        <!-- 数组语法 -->
        <div v-bind:style="[widthstyle,heightstyle]">
            测试内容
        </div>
        <button v-on:click="handle3">切换3</button> 

    </div>
    <script type="text/javascript">
    
      var vm=new Vue({
            el:"#app",
            data:{
                isactive:true,
                iserror:true,
                // 对应的样式
                activeClass:"active",
                errorClass:"error",
                colorstyle:"blue",
                borderstyle:"1px solid green",
                widthstyle:{
                    width:"300px",
                    border:"1px solid red",
                    background:"orange"
                },
                heightstyle:{
                    height:"300px",
                }
            },
            // 实例方法用methods
            methods: {
               handle:function(){
                //    取反 true取false  false取true
                   this.isactive=!this.isactive;
                   this.iserror=!this.iserror;
               },
               handle1:function(){
                   this.activeClass="";
               },
               handle2:function(){   
               },
               handle3:function(){
                   this.heightstyle.height="100px";
               }
            },
        })
    </script>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/vue.js" type="text/javascript"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-if v-else-if v-else不成立不会渲染 -->
        <div v-if="score>=90">优秀</div>
        <div v-else-if="score<90&&score>=80">一般</div>
        <div v-else-if="score<80&&score>=60">良好</div>
        <div v-else>差</div>
        <!-- v-show 不成立渲染但是不展示到页面 相当于隐藏 -->
        <div v-show="flag">测试</div>
        <button v-on:click="handle">切换</button>

        <ul>
            <!-- 遍历对象item的值 可以任意取 -->
            <li v-for="item in fruit">{{item}}</li>
            <!-- index下角标 遍历数组-->
            <li v-for="(item,index) in fruit">{{item+"----"+index}}</li>
            <!-- 遍历json类型 -->
            <li :key="item.id" v-for="(item,index) in myfruit">
                <span>{{item.ename}}</span>
                <span>{{item.cname}}</span>
                <span>{{index}}</span>
            </li>
            <!-- 遍历对象 v值 k键 i下角标(都可以自定义) 可以加v-if进行筛选-->
            <li v-if="v==20" v-for="(v,k,i) in obj">{{v+"---"+k+"---"+i}}</li>
            
        </ul>

    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                score:20,
                flag:false,
                fruit:["apple","orange","banana"],
                myfruit:[
                    {
                        id:1,
                        ename:"apple",
                        cname:"苹果"
                    },{
                        id:2,
                        ename:"orange",
                        cname:"橘子"
                    },{
                        id:3,
                        ename:"banana",
                        cname:"香蕉"
                    }
                ],
                obj:{
                    name:"zzp",
                    age:"20",
                    sex:"男"
                }
            },
            // 实例方法用methods
            methods:{
                handle:function(){
                    this.flag=!this.flag
                }
            },
        })
    </script>
</body>
</html>

Java程序猿哦~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的if，else-if，else，for，css，style等

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <meta http-equiv="X-U.
复制链接

扫一扫