VUE中以v开头的代码和if判断

v-model="变量名" 　　　　　　　　　　双向数据绑定一个变量，基本用在input里获取用户输入的内容
v-bind:class="变量名"huo :class="变量名" 双向数据绑定一个变量，用于改变当前标签的class类和CSS样式内容

if判断

v-if="变量名" 或 v-if="变量名 === 值? 结果:结果" (三目判断) 相当于js的if判断，如果是隐藏则当前标签彻底注释不存在

<p v-if="test"? ‘1‘:‘2‘>如果test的结果是true，则返回1，如果是false则返回2</p>

v-else 　　　　同v-if一起用，必须是前后兄弟元素

<p v-if="num">如果num为true，则显示这段文字</p>
<p v-else>否则就显示这段文字</p>

v-show="变量名" true和false的判断简单的dispaly:none的效果

<p v-show="num">如果num为true，则改当前元素dispaly为block显示，如果是false则改为none隐藏</p>

以上三个的判断，当变量赋值可以为null和undefined 均表示false

原文地址：https://www.cnblogs.com/xiaozhu007/p/8159405.html

时间： 2024-11-08 13:21:13

VUE中以v开头的代码和if判断的相关文章

Vue 中的 v - if 和 v - show + v-for

v-if v-show v-if是动态的向DOM树内添加或者删除DOM元素: v-if和v-show 都可以控制显示隐藏 v-if 它是没有加载DOM结构可以叫做惰性加载 <div id="app"><h1 v-if='true'>{{msg1}}</h1> <span>显示</span> <br><h1 v-if='false'>{{msg2}}</h1> <span>不

Object.defineProperty（）以及 vue 中双数据绑定的底层原理

Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是Object对象其实包含了很多很有用的属性和方法,尤其是ES5增加的方法,今天我们先探讨一下Object.defineProperty(). Object.defineProperty 给一个对象添加或者修改属性返回的是一个对象语法 Object.defineProperty(obj, prop

Vue中v-on的指令以及一些其他指令

1.v-on的基本使用 <div id="app">  <input type="button" value="按钮" v-on:click="btn"> </div> <script> var vm = new Vue({ el: '#app', //methods是用来专门存放vue的处理方法的 methods: { btn

vue中的vue-cli

在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 npm install -g cnpm –registry=https://registry.npm.taobao.org 这个命令行,安装,安装之后检查cnpm的版本 cnpm -v 之后创建项目文件进入项目文件中,在comd中下载vue-cli cnpm install vue-cli -g --s

vue中$watch源码阅读笔记

项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单的$watch: 1 const v = new Vue({ 2 data:{ 3 a: 1, 4 b: { 5 c: 3 6 } 7 } 8 }) 9 // 实例方法$watch,监听属性"a" 10 v.$watch("a",()=>console.log(&

vue 中使用jquery

1.安装jquery npm install jquery --save 2.配置 webpack 找到 build/webpack.base.conf.js 文件. 在开头添加 var webpack = require('webpack') // 原有代码 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }, /

vue中动态添加div

知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可效果: 核心代码说明(样式代码可自行修改,详细代码请参照源码): <div v-for="(v,i) in list"> <div class="form-group m-form__group row" style="padding-top: 1

解决vue中BMap未定义问题

原文链接: 点我最近在项目中使用了百度地图来显示物流信息,实现方式有两种: 引用Vue Baidu Map引用BMap存在的问题:\color{red}{存在的问题:}存在的问题::使用BMap可以修改起始点和终点的图标,但是地图需要刷新页面才会显示.针对以上问题,问题的实现如下所示: Vue文件中的代码 <template> <div id="myMap"></div> </template> import qs from "

横冲直撞vue(第四篇)：v-model、指令系统总结、指令系统示例轮播图实现、指令系统示例跑马灯效果实现、在vue中使用样式的方式

一. v-model v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 尽管有些神奇,但v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 元素使用 value 属性和 input 事件: checkbox