前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

vue中的数据绑定(二)

首页
2018-08-26 14:01:32
Front-End
Vue

Vue 对象的改变会直接影响到 HTML 的标签的变化,而且标签的变化也会反过来影响 Vue 对象的属性的变化

# 一、数据渲染

  <div>{message} </div><!--数据绑定-->
  <div v-html="htmlMess"></div> <!--html绑定-->   
  <div v-text="message"></div>  <!--数据绑定-->  
@前端进阶之旅: 代码已经复制到剪贴板

# 二、属性绑定

<h1 v-bind:title="message">aaa</h1>  <!--属性绑定-->
<a v-bind:href="url">百度</a>  <!--属性绑定-->
<a :href="url">百度</a>    <!--简写-->
@前端进阶之旅: 代码已经复制到剪贴板

# 三、类名绑定

<!--类绑定,当isActive为true时类名生效-->
<div v-bind:class="active : isActive"></div>    

<!--多类名绑定,用逗号隔开-->
<div v-bind:class="active:isActive,red:isRed"></div>

<!--对象类名绑定-->
<div v-bind:class="classObj"></div>    

<!--类名数组绑定-->
<div v-bind:class="[active,red]"></div>   

<!--三元运算符类名绑定-->
<div v-bind:class="isActive ? active : red">fe
  • 一、数据渲染
  • 二、属性绑定
  • 三、类名绑定
  • 四、样式绑定
  • 五、条件绑定
  • 六、事件绑定
  • 七、按键绑定
  • 八、双向绑定

← vue之class与style绑定(三)初识vue与环境搭建(一) →