首页 / VUE / Vue---第十八章元素绑定v-bind

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue---第十八章元素绑定v-bind，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含902字，纯文字阅读大概需要2分钟。

内容图文

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

 

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

内容总结

以上是互联网集市为您收集整理的Vue---第十八章元素绑定v-bind全部内容，希望文章能够帮你解决Vue---第十八章元素绑定v-bind所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1208258.html

来源：【匿名】