vue绑定图片地址及其他常规dom操作

最新推荐文章于 2024-08-08 15:22:16 发布

dongsdh

最新推荐文章于 2024-08-08 15:22:16 发布

阅读量1.3k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/dongsdh/article/details/79866885

版权

Vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title></title>
    <style>
        .myRed{
            color:red
        }
    </style>
</head>
<body>

<div id="container">
    <p>{{msg}}</p>
    <!-- v-bind实现将变量中值 绑定到属性-->
    <img v-bind:src="'img/'+imgUrl"
         style="width:80px;height:80px"
         alt=""/>
    <a :href="myLink">百度</a>

    <button @click="modifyBGColor">修改背景色</button>
    <h1 v-bind:style="{backgroundColor:myBGColor}">
        背景色会被修改
    </h1>

    <p v-bind:class="{myRed:isRed}">我的字体颜色会变化</p>
	<span @click="changcolor">点下试试</span>
    <button v-bind:disabled="!isValid">clickMe</button>

    <button v-show="hasMore" @click="moredata">加载更多</button>
    <p v-show="!hasMore">没有跟多数据可以加载了</p>

    <div v-html="myHtml">it is a test这是一个data里的片段</div>
</div>

<script>
    new Vue({
        el: '#container',
        data: {
            msg: 'Hello Vue',
            imgUrl:'1.jpg',
            myLink:'http://www.baidu.com',
            myBGColor:'#ff0000',
            isRed:false,
            isValid:false,
            hasMore:true,
            myHtml:'<h1>it is a footer</h1>'
        },
        methods:{
            modifyBGColor: function () {
                this.myBGColor = '#0000ff'
            },
            changcolor:function(){
            	this.isRed=true;
            	this.isValid=true;
            },
            moredata:function(){
            	this.hasMore=false;
            }
        }
    })
</script>

</body>
</html>