zoukankan      html  css  js  c++  java
  • 2. Vue3绑定数据

    1.1、Vue3绑定数据

    业务逻辑:

    export default {
        name: "App",
        data() {
            return {
                msg: "你好vue",
                userinfo: {
                    username: "张三",
                    age: 20
                }
            };
        },
    };

    template模板:

    <template> 
    
      <p>msg的值:{{ msg }}</p>
    
      <p>绑定对象:{{ userinfo.username }}</p>
     
    </template>

    1.2、Vue3 v-html绑定html

    业务逻辑:

    export default {
        name: "App",
        data() {
            return {
                h2: "<h2>这是一个html内容</h2>"
            };
        },
    };

    template模板:

    <span v-html="h2"></span>

    1.3、Vue3 v-bind绑定属性

    业务逻辑:

    export default {
        name: "App",
        data() {
            return {
                logoSrc: "https://www.itying.com/themes/itying/images/logo.gif"
            };
        },
    };

    template模板:

    1、绑定属性的第一种写法v-bind:

    <img v-bind:src="logoSrc" alt="logo">

    2、绑定属性的第二种写法:

    <img :src="logoSrc" alt="logo">

    1.4、v-bind动态参数

    <a v-bind:[attributeName]="url"> ... </a>

    这里attributeName将被动态地评估为JavaScript表达式,并且其评估值将用作参数的最终值。例如,如果您的组件实例具有一个数据属性attributeName,其值为"href",则此绑定将等效于v-bind:href

    业务逻辑:

    export default {
        name: "App",
        data() {
            return {
               attributeName: "href",
               linkUrl: "http://www.itying.com",
            };
        },
    };

    template模板:

    <a v-bind:[attributeName]="linkUrl"> 这是一个地址 </a>
    或者
    <a :[attributeName]="linkUrl"> 这是一个地址 </a>

    1.5、v-for循环数组

    业务逻辑:

    export default {
        name: "App",
        data() {
            return {
                list1: ['马总', '刘总', '李总'],
                list2: [{
                        'title': '新闻111'
                    },
                    {
                        'title': '新闻222'
                    },
                    {
                        'title': '新闻33'
                    },
                    {
                        'title': '新闻44'
                    }
                ],
                list3: [{
                        "cate": "国内新闻",
                        "list": [
    
                            {
                                'title': '国内新闻11111'
                            },
                            {
                                'title': '国内新闻2222'
                            }
                        ]
                    },
                    {
                        "cate": "国际新闻",
                        "list": [
    
                            {
                                'title': '国际新闻11111'
                            },
                            {
                                'title': '国际新闻2222'
                            }
                        ]
                    }
    
                ]
    
            };
        },
    };

    template模板:

    注意vue3.x中循环数据需要制定key,代码如下

    <ul>
        <li v-for="(item,index) in list1" :key="index">
            {{item}}
        </li>
    </ul>
    <ul>
        <li v-for="(item,index) in list2" :key="index">
            {{item.title}}
        </li>
    </ul>
    
    <ul>
        <li v-for="(item,index) in list3" :key="index">
            {{item.cate}}
            <ol>
                <li v-for="(news,i) in item.list" :key="i">
                    {{news.title}}
                </li>
            </ol>
    
        </li>
    </ul>

    1.6、v-for循环对象

    业务逻辑:

    export default {
        name: "App",
        data() {
            return {           
     			myObject: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2020-03-22'
                }
            };
        },
    };

    template模板:

    <ul id="v-for-object" class="demo">
    
      <li v-for="(value, name, index) in myObject" :key="index">
      	 {{ name }}: {{ value }}--{{index}}
      </li>
    </ul>
  • 相关阅读:
    JS身份证真实性校验(一)
    Python之文件操作
    python之数据类型
    Python之循环条件、变量、字符串格式化
    webpack之proxyTable设置跨域
    vue报错解决方案
    CentOS 7 下Ansiable搭建命令列表 及常用监控指令
    CentOS 7 下nagios搭建记录
    弹窗鼠标拖动功能-js
    做好探索性测试,体现你的价值
  • 原文地址:https://www.cnblogs.com/guxia/p/14386557.html
Copyright © 2011-2022 走看看