美文网首页
vue指令 v-bind 属性绑定 动态渲染组件

vue指令 v-bind 属性绑定 动态渲染组件

作者: 在路上phper | 来源:发表于2019-05-05 18:02 被阅读0次

控件属性绑定 用v-bind指令
属性只要是html有效属性,一律可以绑定
写法v-bind:控件属性名
例如
v-bind:value 为控件绑定value属性


image.png
image.png

运行结果


image.png
v-bind:属性名可以简写成:属性名的方式
如下
image.png
image.png
运行结果
image.png
还有下面写法
image.png

运行结果


image.png
结合v-for
image.png
运行结果
image.png
看下案例
image.png
有一个对象 如果其属性值为String或者number类型 则渲染成文本框 如果为布尔值
则渲染成复选框
image.png
其中复选框 属性checked绑定了value值 可以根据isStu的值true false更改 选中和非选中状态
运行结果
image.png
改成false
image.png
运行结果
image.png

相关文章

  • 笔记

    "vue里的属性" - 指令{{}}只能在innerhtml部分使用,要动态绑定属性,使用v-bind :styl...

  • vue指令 v-bind 属性绑定 动态渲染组件

    控件属性绑定 用v-bind指令属性只要是html有效属性,一律可以绑定写法v-bind:控件属性名例如v-bin...

  • Vue基础知识(三) - v-bind的其他使用

    关于Vue的v-bind指令还有其他的用法: 1.绑定style属性 2.动态绑定属性名 3.直接绑定对象 1.绑...

  • Vue快速入门(三:常用内置指令)《快乐Vue》

    常用内置指令 v-bind: 主要用于动态的绑定DOM元素属性,即属性值来自 Vue 中的 data 属性提...

  • Vue组件通信

    1) 父组件给子组件传值 利用Vue的组件机制,父亲组件通过 v-bind指令给子组件绑定一个属性,属性值为父组件...

  • 绑定属性

    v-bind指令介绍 动态绑定属性:比如a元素的href属性,img元素的src属性 作用:动态绑定属性 缩写::...

  • vue.js - v-bind 的一些理解和思考

    一、v-bind 初探 它是一个 vue 指令,用于绑定 html 属性,如下: 这里的 html 最后会渲染成:...

  • vue初

    style的绑定 条件渲染 列表渲染 指令总结v-bind可以绑定属性,包括class style,而已省略,使用...

  • Vue API 学习笔记(滚动更新)

    Vue指令 v-bind (运行中动态)添加属性 Attribute 或传输到子组件中的 Props 中的数据。 ...

  • Vue基础指令

    Vue循环指令 Vue绑定指令: v-bind:style,v-bind:class: v-model双向数据绑定...

网友评论

      本文标题:vue指令 v-bind 属性绑定 动态渲染组件

      本文链接:https://www.haomeiwen.com/subject/rdihoqtx.html