背景:因为10月要休产假了,8月的时间我工作很少,因为最开始做平台我一直做的是后端,前端很少接触,所以现在有时间,就学习前端基础,前端使用的vue.js+element,因为没有基础,所以下了一个视频来看,讲师叫一个大地的的老师,目前我的记录也是来做他的视频,有些内容是自己做的补充,自己对陌生的前端做的理解

绑定属性:由名字可以看出,你的控件想要什么特性,就需要设置它的属性,就好比一个人它有哪些属性:1。性别、2名字 这些都是他的属性,下面是属性的使用

安装和demo就不多说了,可以看转载的文章,目前是在APP.VUE中进行修改的

<template>
<div id="app">
<h1>{{ msg }}</h1>
<h2>{{obj.name}}</h2>
<!-- 循环数据 -->
<ul>
<li v-for="(i,key) in list2">
{{i}}----{{key}}
</li>
</ul>
<h2>list3</h2>
<!-- 循环数据,让第一个数据变为红色第二个是blue -->
<ul>
<li v-for="(item,key) in list3" v-bind:class="{'red':key==0,'blue':key==1}">
{{item.titile}}
</li>
</ul> <h2>list4</h2>
<ul>
<li v-for="item1 in list4">
{{item1.test}}
<ol>
<li v-for="item2 in item1.content">
{{item2.titile}}
</li>
</ol>
</li>
</ul>
<!-- 样式绑定,动态改变宽度和高度 -->
<div class="box" v-bind:style="{'width':boxwidth+'px'}">
我来测试高度和宽度
</div>
<!-- 数据绑定 -->
<div v-bind:title="title">测试
</div>
<img src="https://gloimg.rowcdn.com/ROSE/pdm-product-pic/Clothing/2018/06/13/goods-img/1528854101681186750.jpg"/>
<br>
<!-- src数据绑定 -->
<img v-bind:src="url"/>
<br>
<img :src="url"/>
<br>{{h}}
<!-- html数据绑定 -->
<div v-html="h"> </div>
<!-- 另外一个数据绑定 -->
<div v-text="msg"></div>
<!-- class绑定 -->
<div v-bind:class="{'red':!flag,'blue':test}" >我是一个class</div>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
msg: 'hello',
url:'https://gloimg.rowcdn.com/ROSE/pdm-product-pic/Clothing/2018/06/13/goods-img/1528854101681186750.jpg',
title:"我现在就是在测试",
h:"<h2>html</html>",
flag:false,
test:true,
boxwidth:500,
obj:{
name:"jun",
}, list2:['1','2','3','4'],
list3:[
{'titile':'测试1'},
{'titile':'测试1'},
{'titile':'测试1'},
{'titile':'测试1'},
],
list4:[
{
'test':'测试标题1',
'content':[
{'titile':'标题1'},
{'titile':'标题2'},
]
},
{
'test':'测试标题2',
'content':[
{'titile':'标题12'},
{'titile':'标题23'},
]
}
],
}
}
}
</script> <style> h1, h2 {
font-weight: normal;
}
.red{
color:red
}
.blue{
color:blue
} a {
color: #42b983;
}
.box{
width: 100px;
height: 100px;
background-color: #42b983
}
</style>

  

 绑定属性使用关键词v-bind:   有时候代码中也会省略使用':' 代替

vue.js--基础 v-bind绑定属性使用的更多相关文章

  1. Vue.js的类Class 与属性 Style如何绑定

    Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...

  2. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  3. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  4. vue.js基础知识篇(4):过滤器、class与style的绑定2

    代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...

  5. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  6. 记录21.07.22 —— Vue.js基础(一)

    VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...

  7. 一份不错的vue.js基础笔记!!!!

    第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...

  8. Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  9. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  10. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

随机推荐

  1. asp.net core WebAPI学习以及 发布(***入门学习)

    A asp.net Core 系列[一]——创建Web应用 asp.net Core 系列[二]—— 使用 ASP.NET Core 和 VS2017 for Windows 创建 Web API a ...

  2. my21_myloader -o参数

    -o 参数 如果不使用-o参数,遇到第一个有主键或者唯一约束的数据,则退出当前线程:如果有-o参数,则删除原来的表,创建新表,再插入数据,主键不会发生变化. ** Message: Dropping ...

  3. SSMS 远程连接SERVER 设置 - Unable to connect to SQL Server instance remotely

    问题描述: 新装了一台SERVER,在SERVER本地打开SSMS链接sever,一且正常.但是用我自己local去链接的时候出现以下错误. A network-related or instance ...

  4. DTCMS 网站管理系统

    dtcms适合开发一些简单小型网站 开发的过程中遇见了各种问题,下面总结下我遇见的问题 1.遇见提示未开启生成静态功能 在系统设置里面将“伪URL重写”为“生成静态”可以解决 2.在生成静态页面的时候 ...

  5. ubuntu下搭建android开发环境核心篇安装AndroidStudio、sdk、jdk

    本文系转载http://blog.csdn.net/lsyz0021/article/details/52215996 一.安装前的准备 1.1.如果你还没有安装ubuntu 14.04 LTS系统, ...

  6. (转)DNS解析过程详解

    DNS解析过程详解 原文:http://blog.csdn.net/crazw/article/details/8986504 先说一下DNS的几个基本概念: 一. 根域 就是所谓的“.”,其实我们的 ...

  7. IDEA部署Express工程

    1.下载并安装Nodejs 2.通过Nodejs的NPM工具安装全局安装express工具,命令如下: npm install -g express@XXX npm install -g expres ...

  8. Windows Server 2008下的FTP服务器设置

    今天刚在新服务器上部署好Windows Server 2008,同时安装好了SQL,基本上还算顺利.没想到在设置FTP服务器的时候遇到了麻烦.按照以往的经验,安装好Serv-U以后,同时在防火墙设置里 ...

  9. 判断表单中是否含有disabled属性

    我想判断input里面是否有disabled.或者选中未选中的selected  checked 属性时,需要用  prop()  方法,返回的结果是 true 或 false . attr()这个方 ...

  10. NLog学习笔记二:深入学习

    配置文件 NLog所有的配置信息都可以写到一个单独的xml文件中,也可以在程序代码中进行配置. 配置文件位置 启动的时候,NLog会试图查找配置文件完成自动配置,查找的文件依次如下(找到配置信息则结束 ...