脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue绑定设置属性

vue绑定设置属性的多种方式(5)

 更新时间：2017年08月16日 08:37:29   作者：ghostwu  
这篇文章主要为大家详细介绍了vue绑定设置属性的多种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue系列教程第五篇，即绑定设置属性的多种方式，具体内容如下

一、设置属性的值: {{data中的数据}}

window.onload = function () {
  var c = new Vue({
  el : '#box',
  data : {
   url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg'
  }
  });
 }
<div id="box">
  <img src="{{url}}" alt=""/>
</div>

二、v-bind绑定属性的值

window.onload = function () {
  var c = new Vue({
  el : '#box',
  data : {
   url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg'
  }
  });
 }
 
<div id="box">
 <img v-bind:src="url" alt=""/>
</div>

三、简写方式，冒号 (:) 绑定

window.onload = function () {
  var c = new Vue({
  el : '#box',
  data : {
   url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg'
  }
  });
 }
<div id="box">
 <img :src="url" alt=""/>
 </div>

四、绑定多个属性

window.onload = function () {
  var c = new Vue({
  el : '#box',
  data : {
   url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg',
   w : '400px',
   t : '这是一张百度图片'
  }
  });
 }
<div id="box">
 <img :src="url" :width="w" :title="t" alt=""/>
</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue封装远程下拉框组件的实现示例

    Vue封装远程下拉框组件的实现示例

    本文主要介绍了Vue封装远程下拉框组件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue嵌套路由的各种用法详解

    Vue嵌套路由的各种用法详解

    在 Vue 中,嵌套路由和 Element Plus 的 Menu 组件是构建复杂单页面应用（SPA）时的常用组合,通过嵌套路由,可以实现多级页面结构,以下是结合 Vue 嵌套路由和 Element Plus Menu 的各种用法和场景的详细介绍,需要的朋友可以参考下
    2025-01-01
  • 如何为Vue3提供一个可媲美Angular的ioc容器

    如何为Vue3提供一个可媲美Angular的ioc容器

    ue3因其出色的响应式系统,以及便利的功能特性,完全胜任大型业务系统的开发,这篇文章主要介绍了如何为Vue3提供一个可媲美Angular的ioc容器,需要的朋友可以参考下
    2024-08-08
  • vue项目打包后proxyTable代理失效问题及解决

    vue项目打包后proxyTable代理失效问题及解决

    这篇文章主要介绍了vue项目打包后proxyTable代理失效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。
    2023-05-05
  • vue3 表单搜索内容回显到地址栏的实例代码

    vue3 表单搜索内容回显到地址栏的实例代码

    这篇文章主要介绍了vue3 表单搜索内容回显到地址栏的实例代码,地址栏输入内容回显到form表单,同理表单输入内容也要回显到地址栏中,本文结合实例代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue中使用svg-icon遇到的坑及解决

    vue中使用svg-icon遇到的坑及解决

    这篇文章主要介绍了vue中使用svg-icon遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • Vue中import from的来源及省略后缀与加载文件夹问题

    Vue中import from的来源及省略后缀与加载文件夹问题

    这篇文章主要介绍了Vue中import from的来源--省略后缀与加载文件夹,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • Vuex的初探与实战小结

    Vuex的初探与实战小结

    这篇文章主要介绍了Vuex的初探与实战小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue登录页实现使用cookie记住7天密码功能的方法

    vue登录页实现使用cookie记住7天密码功能的方法

    这篇文章主要介绍了vue登录页实现使用cookie记住7天密码功能的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • 如何利用Vue3管理系统实现动态路由和动态侧边菜单栏

    如何利用Vue3管理系统实现动态路由和动态侧边菜单栏

    通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了,下面这篇文章主要给大家介绍了关于如何利用Vue3管理系统实现动态路由和动态侧边菜单栏的相关资料,需要的朋友可以参考下
    2022-02-02

最新评论