vue.js--基础 v-bind绑定属性使用
背景:因为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绑定属性使用的更多相关文章
- Vue.js的类Class 与属性 Style如何绑定
Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...
- Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- vue.js基础知识篇(4):过滤器、class与style的绑定2
代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 记录21.07.22 —— Vue.js基础(一)
VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...
- 一份不错的vue.js基础笔记!!!!
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
- Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
随机推荐
- asp.net core WebAPI学习以及 发布(***入门学习)
A asp.net Core 系列[一]——创建Web应用 asp.net Core 系列[二]—— 使用 ASP.NET Core 和 VS2017 for Windows 创建 Web API a ...
- my21_myloader -o参数
-o 参数 如果不使用-o参数,遇到第一个有主键或者唯一约束的数据,则退出当前线程:如果有-o参数,则删除原来的表,创建新表,再插入数据,主键不会发生变化. ** Message: Dropping ...
- SSMS 远程连接SERVER 设置 - Unable to connect to SQL Server instance remotely
问题描述: 新装了一台SERVER,在SERVER本地打开SSMS链接sever,一且正常.但是用我自己local去链接的时候出现以下错误. A network-related or instance ...
- DTCMS 网站管理系统
dtcms适合开发一些简单小型网站 开发的过程中遇见了各种问题,下面总结下我遇见的问题 1.遇见提示未开启生成静态功能 在系统设置里面将“伪URL重写”为“生成静态”可以解决 2.在生成静态页面的时候 ...
- ubuntu下搭建android开发环境核心篇安装AndroidStudio、sdk、jdk
本文系转载http://blog.csdn.net/lsyz0021/article/details/52215996 一.安装前的准备 1.1.如果你还没有安装ubuntu 14.04 LTS系统, ...
- (转)DNS解析过程详解
DNS解析过程详解 原文:http://blog.csdn.net/crazw/article/details/8986504 先说一下DNS的几个基本概念: 一. 根域 就是所谓的“.”,其实我们的 ...
- IDEA部署Express工程
1.下载并安装Nodejs 2.通过Nodejs的NPM工具安装全局安装express工具,命令如下: npm install -g express@XXX npm install -g expres ...
- Windows Server 2008下的FTP服务器设置
今天刚在新服务器上部署好Windows Server 2008,同时安装好了SQL,基本上还算顺利.没想到在设置FTP服务器的时候遇到了麻烦.按照以往的经验,安装好Serv-U以后,同时在防火墙设置里 ...
- 判断表单中是否含有disabled属性
我想判断input里面是否有disabled.或者选中未选中的selected checked 属性时,需要用 prop() 方法,返回的结果是 true 或 false . attr()这个方 ...
- NLog学习笔记二:深入学习
配置文件 NLog所有的配置信息都可以写到一个单独的xml文件中,也可以在程序代码中进行配置. 配置文件位置 启动的时候,NLog会试图查找配置文件完成自动配置,查找的文件依次如下(找到配置信息则结束 ...