首页 > 其他 > 详细

Vue---第十八章元素绑定v-bind

时间:2021-02-08 16:54:53      阅读:23      评论:0      收藏:0      [点我收藏+]

1.格式

完整格式:v-bind:元素属性=‘xxx‘

缩写格式::元素属性=‘xxx‘

在上一章节的基础上,我们增加了如下代码,imgUrl的地址是网上随便找的

技术分享图片

 

 然后我们看看效果

技术分享图片

 

 

 

技术分享图片

 

 增加跳转链接

技术分享图片

 

 技术分享图片

 

 技术分享图片

 

 

2.事件绑定,格式

完整写法:v-on:事件名称="事件处理函数名"

缩写:@事件名称="事件处理函数名" 

用于监听DOM事件

代码如下

技术分享图片

 

 <div>

  <input type="text" value="1" v-model="num">
        <button v-on:click="add">点击+1</button>

</div>

<script>
        var vue=new Vue({
            el:"#app",
            data:{
                msg:‘小桃子‘,
                name:‘xiaol‘,
                score:100,
                contentHtml:`<span style="color:red">此内容为红色字体
                    <script>alert(‘hello xiaotiaozi‘)<\/script>
                    </span>`,
                imgUrl:‘https://cn.vuejs.org/images/logo.png‘,
                xiaotaozi:‘https://i.cnblogs.com/posts/edit‘,
                num:10
            },
            methods:{//指定事件处理函数
                add:function(){//定义一个add函数
                    console.log(‘add被调用‘)
                    this.num ++
                }
            }
        })
    </script>

技术分享图片

 

 前面是不是输入框是由input标签决定,初始值num=10是由data中的数据实现然后再由v-model来决定,button是点击事件的标签,button中value的值为点击+1,然后在button中绑定v-no标签来实现函数加1

 

Vue---第十八章元素绑定v-bind

原文:https://www.cnblogs.com/wendy-0901/p/14388893.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!