Vue简单入门学习-----day1-基础用法

一、数据的双向绑定及添加删除等

<div id="app">{{nickname}}<input type="text" v-model="nickname"><button @click="add">添加</button><ul><li v-for="(item,i) in userList">{{i+1}}.{{item}}<button @click="del(i)">删除</button></li></ul></div><script src="../node_modules/vue/dist/vue.min.js"></script><script>new Vue({el:"#app",data() {return {nickname:'',userList:[]}},methods:{add(){this.userList.push(this.nickname)this.nickname = ''},del(i){this.userList.splice(i,1)}}})</script>

二、v-bind 及过滤器filter的用法示例

 <style>*{margin: 0;padding: 0;}table{border-collapse: collapse;margin: 100px auto;}table td,table th{border: 1px solid #ccc;text-align: center;width: 200px;}</style>
</head>
<body><div id="app"><table><tr><th>序号</th><th>名称</th><th>图片</th><th>价格</th></tr><tr v-for="(item,i) in list"><td>{{item.id}}</td><td><a :href="'detail.html?name='+item.name">{{item.name}}</a></td><td><img :src="item.img" :style="{width:'100px',height:'100px'}"></td><td>{{item.price | fmtPrice}}</td></tr></table></div><script src="../node_modules/vue/dist/vue.min.js"></script><script src="../vue-filter.js"></script><script>new Vue({el:"#app",data() {return {list: [{price: 300,id: 1,name: 'truman',img: 'https://bkimg.cdn.bcebos.com/pic/77c6a7efce1b9d16e25dce36fddeb48f8d5464ca?x-bce-process=image/resize,m_lfit,w_500,h_500,limit_1'},{price: 400,id: 2,name: 'Andy',img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2595383902,1980760291&fm=26&gp=0.jpg'},{price: 500,id: 3,name: 'paul',img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590985109489&di=a0272454e47a8a581823ef95202abc65&imgtype=0&src=http%3A%2F%2Fgss1.bdstatic.com%2F9vo3dSag_xI4khGkpoWK1HF6hhy%2Fbaike%2Fcrop%253D10%252C0%252C138%252C196%253Bh%253D780%253Bq%253D70%2Fsign%3D121a813444a98226ac8e7167b7b3892d%2F58ee3d6d55fbb2fbbac85b53484a20a44723dc94.jpg'},]}},methods:{}})</script>

三、Vue中的tab切换

 <style>*{margin: 0;padding: 0;list-style: none;}ul{display: flex;}ul li{padding: 10px 20px;margin: 0 10px;}ul li.active{background: red;color: #fff;}</style>
</head>
<body><div id="app"><ul><li v-for="(item,i) in cityList" :class="{active:i===activeIndex}" @click='activeIndex = i'>{{item}}</li></ul></div><script src="../node_modules/vue/dist/vue.min.js"></script><script>new Vue({el:"#app",data() {return {activeIndex:0,cityList:['上海','南京','北京','深圳']}},methods:{select(i){this.activeIndex = i}}})</script>
</body>

四、计算属性computed用法

<body><div id="app"><fieldset><legend>男生</legend><ul><li v-for="item in maleList">{{item.name}} {{item.gender | fmtGender}}</li></ul></fieldset><fieldset><legend>女生</legend><ul><li v-for="item in femaleList">{{item.name}} {{item.gender | fmtGender}}</li></ul></fieldset></div><script src="../node_modules/vue/dist/vue.min.js"></script><script src="../vue-filter.js"></script><script>new Vue({el:"#app",computed: {maleList(){return this.userList.filter(r => r.gender)},femaleList(){return this.userList.filter(r => !r.gender)}},data() {return {userList:[{name:'张三',gender:1},{name:'李四',gender:1},{name:'王五',gender:1},{name:'张三2',gender:0},{name:'李四2',gender:0},{name:'王五2',gender:0}]}},methods:{}})</script>
</body>

Vue简单入门学习-----day1-基础用法相关推荐

Vue简单入门及使用(二)---基本语法及组件使用
Vue简单入门及使用(二)---基本语法及组件使用 Vue文件解读基本语法 Vue组件使用前言:做一个有梦想的程序猿! Vue文件解读以HelloWorld.vue文件为例一个vue文件里面包 ...
vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
Shader Forge 入门学习(一) 基础操作
引言:失踪人口回归,最近几个月刚刚毕业,进入社会,对着未来有着些许迷茫,但起风了,唯有努力生存!近日学习Shader Forge,记录下来,共同进步!内容主要包括ShaderForge的操作设置,并配 ...
Framework7 Vue 教程入门学习
网上关于Framework7的博客.学习资料少之又少,所以我想把我学习Framework7 Vue的入门记录一下. Framework7 Framework7 是一个开源免费的框架可以用来开发混合移动 ...
单片机STC89C51入门学习笔记--基础实验例程（一）
文章目录前言 1. 点亮第一个LED 1.1 代码 1.2 编译 1.3 程序下载 1.4 结果展示 1.5 常见问题及解决办法 2. LED灯闪烁 2.1 代码 2.2 编译 2.3 程序下载 2 ...
区块链入门学习的基础知识
区块链的起源互联网发展至今,每一项新技术的诞生都在深刻改变着人们的生活方式.如今一个冉冉升起的新技术--区块链(Blockchain),来到历史舞台前沿,它让全世界范围内任何一笔比特币(Bitcoi ...
JS简单入门学习笔记一
JS的HelloWorld 在页面中输出一个内容 document.write(); 向控制台输出一个内容 console.log(); /**1.JS中严格区分大小写*2.JS中每一条语句以分号结尾 ...
MySQL数据库简单入门学习教程---带你从零开始学mysql
目录学习教程: 接下来让我们了解一下数据库是什么? (一)什么是数据库?什么是数据库管理系统?什么是SQL?他们之间的关系是什么? 数据库: (二)安装MySQL数据库管理系统 (三)MySQL数据 ...
vue从入门到精通之基础篇（一）语法概要
(1).vue起步 1:引包 2:启动 new Vue({el:目的地,template:模板内容}); options 目的地 el 内容 template 数据 data 保存数据属性数据驱动视 ...

Vue简单入门学习-----day1-基础用法

一、数据的双向绑定及添加删除等

二、v-bind 及过滤器filter的用法示例

三、Vue中的tab切换

四、计算属性computed用法

Vue简单入门学习-----day1-基础用法相关推荐

最新文章

热门文章

Vue简单入门学习-----day1-基础用法

一、数据的双向绑定及添加删除等

二、v-bind 及 过滤器filter的用法示例

三、Vue中的tab切换

四、计算属性computed用法

Vue简单入门学习-----day1-基础用法相关推荐

最新文章

热门文章

二、v-bind 及过滤器filter的用法示例