vue--简单数据绑定
<template>
<div id="app">
{{msg}} //绑定数据
{{obj.name}} //绑定对象
<p v-for="x in list">{{x}}</p> //绑定列表
<p v-for="x in list1">{{x.name}}</p> //绑定列表
<p v-bind:title="title">{{title}}</p> //绑定属性
<p :title="title">{{title}}</p>//简写
<p v-bind:url="url">{{url}}</p> //绑定属性
<p :url="url">{{url}}</p> //绑定属性
<p v-html="html"></p> //绑定HTML
<p v-text="html"></p> //绑定文本
<p :class="{'red':color}">{{title}}</p> //绑定类名
<p :class="{'red':color,'blue':!color}">{{title}}</p> //绑定类名
<p :style="{'width':boxwidth}">{{msg}}</p> //绑定样式
</div>
</template>
<script>
export default {
name: 'App',
data (){
return {
msg:"你好!",
obj:{name:'张三'},
list:['a','b','c','d'],
list1:[
{name:'110'},
{name:'112'}
],
title:'标题',
url:'http://www.baidu.com/',
html:"<h2>标题</h2>",
color:true,
boxwidth:'500px'
}
}
}
</script>
vue--简单数据绑定的更多相关文章
- vue双向数据绑定的简单实现
vue双向数据绑定的简单实现 参考教程:链接 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue双向数据绑定最最最最最简单直观的例子
vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...
- vue 双向数据绑定的实现学习(二)- 监听器的实现
废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 ...
- angular和vue双向数据绑定
angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- vue简单的CheckBox节点树
初学vue.js,恰好公司有个页面需要做一个简单的CheckBox组成的节点树,于是摸索着写了一个. 业务逻辑为:选中父节点,子节点全部选中:取消选中父节点,子节点全部取消:选中字节点,父节点选中. ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- 【翻译】使用Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定
原文地址:http://www.dotnetjalps.com/2013/05/Simple-data-binding-with-Knockout-Web-API-and-ASP-Net-Web-Fo ...
- Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定
使用Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定 原文地址:http://www.dotnetjalps.com/2013/05/Simple-da ...
- vue 双向数据绑定的实现学习(一)
前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...
随机推荐
- VC++调用MSFlexGrid的SetRow方法,出现异常“Invalid Row Value”
MSFlexGrid是微软提供的网格表格控件,SetRow方法用于设置当前焦点所在行. C++ Code 12345 void CMSFlexGrid::SetRow(long nNewVal ...
- Nginx 向客户端输出真实的后端IP地址
因为涉及到内外网的改造,所以狠多东西现在需要依赖于openresty来做总控实现.然后就碰见了一个比较难办的问题,即在upstream时候,如何获取实际处理请求的server地址.假设有如下upstr ...
- nginx: [emerg] getpwnam(“www”) failed错误
linux 64系统中安装nginx时如果出现错误:nginx: [emerg] getpwnam(“www”) failed in ........解决方法1: 在nginx.conf中 ...
- 8 -- 深入使用Spring -- 4...1 为什么需要AOP
8.4.1 为什么需要AOP AOP专门用于处理系统中分布于各种模块(不同方法)中的交叉关注点的问题,在Java EE应用中,常常通过AOP来处理一些具有横切性质的系统级服务,如事务管理.安全检查.缓 ...
- 简单思考 如何用PHP输出本周的周三日期
简单思考 如何用PHP输出本周的周三日期?比如今天2017-10-31 计算本周周三应该是2017-11-01 自己动脑筋想一想,然后给我留言或者评论
- AcceptEx 以及 获取远程IP与port
// 獲取本地以及遠程的IP和port setsockopt(clientfd, SOL_SOCKET, SO_UPDATE_ACCEPT_CONTEXT, (char *)&listenfd ...
- Maven 多项目依赖,需要验证artifact的output root中是否包含其他项目输出
- 使用一条sql查询多个表中的记录数
方法一: select t1.num1,t2.num2,t3.num3 from (select count(*) num1 from table1) t1, (select count(*) num ...
- Disruptor LMAX学习
http://lmax-exchange.github.io/disruptor/ http://bruce008.iteye.com/blog/1408075 http://code.google. ...
- [Android] Nexus 7 二代连接 Windows 7
Android 设备的三大 USB 连接模式 MTP:Media Transfer Protocol - 媒体传输协议,Windows 下最常见的连接模式,是微软一种可以管理便携存储设备的协议.MTP ...