zoukankan      html  css  js  c++  java
  • Vue v-bind

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <h1>{{msg}}</h1>
            <p>--------------------</p>
            <img v-bind:src="imgUrl" v-bind:alt="alt">
            <a v-bind:href="site">baidu</a>
            <p>--------简写------------</p>
            <img :src="imgUrl" :alt="alt">
            <a :href="site">baidu</a>
        </div>
        <script src="js/vue.3.2.2.js"></script>
        <script>
            // 1、创建Vue的实例对象
            const app = Vue.createApp({
                data(){//定义数据
                    return {
                        msg:'你好!',
                        imgUrl:'https://img1.baidu.com/it/u=3333263520,4067079584&fm=26&fmt=auto&gp=0.jpg',
                        alt:'风景',
                        site:'http://www.baidu.com'
                    }
                }
            }).mount('#app');
        </script>
    </body>
    </html>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .red{
                color:red;
            }
    
            .f60{
                font-size: 60px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h1 class="red">{{msg}}</h1>
            <p>--------------------</p>
            <h1 :class="arg1">{{msg}}</h1>
            <p>--------------------</p>
            <h1 :class="{red:true,f60:true}">{{msg}}</h1>
            <h1 :class="getClass1()">{{msg}}</h1>
            <p>--------------------</p>
            <h1 class="box" :class="{red:isRed,f60:isF60}">{{msg}}</h1>
            <button @click="change">切换</button>
            <p>--------------------</p>
            <h1 :class="[arg1,arg2]">{{msg}}</h1>
            <h1 :class="getClass2()">{{msg}}</h1>
            <p>--------------------</p>
            <h1 style="font-size: 50px;">{{msg}}</h1>
            <h1 :style="{fontSize:'50px'}">{{msg}}</h1>
            <h1 :style="{fontSize:arg3,backgroundColor:'red'}">{{msg}}</h1>
            <h1 :style="getStyle()">{{msg}}</h1>
            <p>--------------------</p>
            <img v-bind:src="imgUrl" v-bind:alt="alt">
            <a v-bind:href="site">baidu</a>
            <p>--------简写------------</p>
            <img :src="imgUrl" :alt="alt">
            <a :href="site">baidu</a>
        </div>
        <script src="js/vue.3.2.2.js"></script>
        <script>
            // 1、创建Vue的实例对象
            const app = Vue.createApp({
                data(){//定义数据
                    return {
                        msg:'你好!',
                        imgUrl:'https://img1.baidu.com/it/u=3333263520,4067079584&fm=26&fmt=auto&gp=0.jpg',
                        alt:'风景',
                        site:'http://www.baidu.com',
                        arg1:'red',
                        arg2:'f60',
                        arg3:'50px',
                        arg4:'red',
                        isRed: true,
                        isF60: false
                    }
                },
                methods:{
                    change(){
                        this.isRed = !this.isRed;
                        this.isF60 = !this.isF60;
                    },
                    getClass1(){
                        return {red:this.isRed,f60:this.isF60};
                    },
                    getClass2(){
                        return [this.arg1,this.arg2];
                    },
                    getStyle(){
                        return {fontSize:this.arg3,backgroundColor:this.arg4};
                    }
                }
    
            }).mount('#app');
        </script>
    </body>
    </html>
  • 相关阅读:
    12.Docker网络类型
    博客迁移
    java注解
    IO多路复用技术(multiplexing)
    Java 中extends与implements使用方法
    初识autoconf
    初识swoole
    简单配置nginx使之支持pathinfo
    vue-cli 脚手架 安装过程
    PHP阻止页面后退如何用PHP实现禁用浏览器的后退,使后退的页面失效或链接到别的地方?使用php禁止浏览器缓存?
  • 原文地址:https://www.cnblogs.com/mingforyou/p/15143826.html
Copyright © 2011-2022 走看看