v-bind与v-on使用案例详解

发布时间：2022-06-07 21:46:22 所属栏目：搜索优化来源：互联网

导读：这次给大家带来v-bind与v-on使用案例详解，v-bind与v-on使用注意事项有哪些，下面就是实战案例，一起来看一下。 v-bind 指令用于响应地更新 HTML 特性形式如：v-bind:href 缩写为 :href; v-on 指令用于监听DOM事件形式如：v-on:click 缩写为 @click; bod

这次给大家带来v-bind与v-on使用案例详解，v-bind与v-on使用注意事项有哪些，下面就是实战案例，一起来看一下。

　　v-bind 指令用于响应地更新 HTML 特性形式如：v-bind:href 缩写为 :href;

　　v-on 指令用于监听DOM事件形式如：v-on:click 缩写为 @click;

　　<body>

　　 <p id="test">

　　 <img v-bind:src="src">

　　 <a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>

　　 <a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>

　　 <a href="{{url}}" rel="external nofollow" >百度一下</a>

　　 <a v-on:click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改图片</a>

　　 <a @click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改图片</a>

　　 </p>

　　 <script type="text/javascript">

　　 new Vue({

　　   el: '#test',

　　   data: {

　　    url: "https://www.baidu.com",

　　    src: "img/spring.jpg"16 17 18    },

　　   methods: {

　　    update: function(){

　　     this.src = "img/summer.jpg";

　　    }

　　   }

　　 })

　　 </script>

　　</body>

　　note: vue.js 1.0版本后才有的这两个指令

　　v-bind,v-on的缩写

　　构建单页应用（SPA ）时，Vue.js 会管理所有的模板，此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和v-on 提供特别的缩写：

　　下面给大家介绍下v-bind缩写：

　　

　　<a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>

　　

　　<a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>

　　

　　<button v-bind:disabled="someDynamicCondition">Button</button>

　　

　　<button :disabled="someDynamicCondition">Button</button>

　　v-on缩写：

　　

　　<a v-on:click="doSomething"></a>

　　

　　<a @click="doSomething"></a>。

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

关键词迟迟不上排名的	如何做好搜索引擎的se
seo优化重要哪些领域应	网站程序与SEO排名的联