Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性 一.实例演示,v-if,v-for,v-model,v-bind,v-on
| 方法 | 含义 |
|---|---|
| v-bind | 自定义普通属性，快捷语法是一个":"号 |
| v-on | 事件属性，快捷语法是一个"@"符 |
| v-model | 双向绑定 |
| v-for | v-for : (循环变量, 索引/键) in/of 数组/对象 :key |
| v-if | 条件渲染流程判断，有单分支和多分支 |
①v-bind，自定义普通属性，快捷语法是一个":"号
代码块
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> <body><div class="box"><!-- v-bind指令，自定义普通属性，--><p v-bind:style="style1">{{text}}</p><hr /><!-- 快捷语法‘：’ --><p :style="style2">{{text}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new Vue({el: ".box",data: {text: "v-bind指令",style1: "color:red",style2: "background:blue",},});</script></body
②v-on，事件属性，快捷语法是一个"@"符
代码块
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new Vue({el: ".box",data: {text: "v-on指令",},//事件方法methods: {click1() {alert(this.text);d;},},});</script>
③v-model，双向绑定
代码块
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new Vue({el: ".box",data: { data1: "祖国未来可期" },});</script>④v-for,列表渲染
代码块
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new Vue({el: ".box",data: {//渲染数组item: ["苹果", "香蕉", "西瓜", "葡萄"],//渲染对象hobby: { hobby1: "羽毛球", hobby2: "篮球" },//渲染对象数组user: [{ id: 1, name: "小张", get: "20" },{ id: 2, name: "小红", get: "20" },{ id: 3, name: "小朱", get: "20" },],},});</script>
⑤v-if,条件渲染
- 单分支
- 多分支
代码块
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new Vue({el: ".box",data() {return {text: "点击显示或者隐藏",flase: "true",tips: "显示",name: ["大众会员", "黄金会员", "铂金会员", "钻石会员", "非会员"],point: 500,text: "点击加积分",};},});</script>
二.计算属性和侦听器属性
| 方法 | 含义 |
|---|---|
| 键盘修饰符 | todolist |
| 计算属性 | conputed |
| 侦听器属性 | watch |
①键盘修饰符:todolist
代码块
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new Vue({el: ".box",data() {return {list: [],};},methods: {submit(ev) {//原生判断键盘添加文字// if (ev.key === "Enter") {// this.list.unshift(ev.target.value);// ev.target.value = null;// }//vue 键盘修饰符添加文字this.list.unshift(ev.target.value);ev.target.value = null;console.log(ev.key);},},});</script>
②计算属性computed
代码块
<script>new Vue({el: ".box",data() {return {//双向绑定sumsum: "0",//单价是50money: 50,};},//计算属性computedcomputed: {amount: {//访问器属性getget() {//指当前sum变量*money变量return this.sum * this.money;},},},});</script>
③侦听器属性watch
代码块
<script>new Vue({el: ".box",data() {return {//双向绑定sumsum: "0",//单价是50money: 50,res: 0,max: 100,};},//侦听器属性watch: {// 是用来监听某一个属性的值的变化,属性名要和data字段中的变量名相同// 例如,我要监听"num"变量的变化// sum(新的值,原来的值)sum(newVal, oldVal) {this.res = newVal * this.money;//监听库存量if (newVal > 20) {this.max = newVal;alert("库存不足");}},},});</script>
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性相关推荐
- VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础 安装 CDN 下载 安装 命令行工具(CLI脚手 ...
- Vue.js 计算属性和侦听器
计算属性和侦听器 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- 5.Vue 计算属性和侦听器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 5.Vue 计算属性和侦听器 ...
- VUE自学日志05-计算属性和侦听器
## 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如,有一个嵌套数组对象: Vue.createApp({data() {re ...
- (第二篇)Vue计算属性、侦听器、过滤器
1.计算属性和侦听器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- vue修改计算属性的值_Vue语法高级之计算属性和侦听器
计算属性和侦听器都可以监听到data区数据的变化,当数据变化时可以触发方法的调用,从而在方法内部可以进行相应的逻辑处理. 计算属性的语法格式是:computed: {} 侦听器的语法格式是:watch ...
- Vue 计算属性与侦听器
这一节我们一起学习 vue 中的计算属性(computed properties)和侦听器(watch). 在之前,我们学习过 vue 表达式插值: <div id="example& ...
- Vue——计算属性与侦听器
目录 一.计算属性 1.基本使用 2.复杂使用 3.getter和setter 4.计算属性和methods的对比 二.侦听器 1.watch的用法 一.计算属性 1.基本使用 现在有变量姓氏和名 ...
- vue修改计算属性的值_「Vue学习记录五」计算属性和侦听器
1: 计算属性: (内置缓存机制) 当更改age的时候, fullName 函数不执行: 当更改fristName的时候, fullName 函数才执行 <div id = "app& ...
最新文章
- 有抱负的Web开发人员应考虑的6件事
- “智慧城市”建设中的金融力量
- My SQL出错代码及出错信息对照
- 银行应用_讲解人脸识别在银行的应用
- n个节点的二叉树n+1_使用C ++程序删除链接列表的M个节点后的N个节点
- 链表题目---3 合并两个有序单链表 和 分割链表
- MySQL 的CASE WHEN 语句
- Linux内核概念：per-CPU，cpumask，inicall机制，通知链
- 雷军100亿押注IoT，小米借AI两翼齐飞
- 多线程编程(1): python对多线程的支持
- 27留数及其应用（三）
- git@github.com: Permission denied
- (教程)手把手教你如何申请软件著作权
- 积分墙渠道运营那些事儿
- 晶体二极管的分类大全
- IB中文阅读书单推荐
- DDD中的“领域模型”
- html5调整文字段落之间的距离,css设置p段落上下间距距离
- D365 CRM 在视图中添加自定义图标
- 嵌入式Linux小项目之图片编解码播放器(6)