vue基础知识简述(v-if&v-for&v-show&v-model)

条件渲染主要有两个指令：v-if v-show

   有v-if 相应会有 v-else v-else-if

      v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染

v-if为true的表达式会显示

v-if为false的表达式不会显示

示例需要用到的data部分：

利用data变量进行判断使用

类似于if-else条件语句判断

在template上使用 v-if 条件渲染分组

利用上面提供的data变量和下面的template结合，启动网页后查看源码可知

v-show与v-if区别：

  v-show 只是简单的切换元素的display CSS propertity,带有 v-show 元素始终会被渲染并保存在 dom 中

    v-if:后面若为false，标签直接消失，控制dom元素的创建和销毁

      v-if是一个编译、卸载的过程，创建和销毁子组件

          v-show是控制css property

v-for用于循环遍历数据

 示例需要用到的data部分：

用v-for把一个数组映射为一组元素

  v-for基于一个数组来渲染一个列表

   v-for使用数组，item代表数组中每个元素，index表示数组元素下标

两种分隔符：in of

  item标识键值，key表示键名，index表示索引

注意观察上面循环标签的最后都有 :key

 为什么要添加key

  key作为唯一标识

   为了给vue一个提示，以便它能跟踪每一个节点的身份，重而重用和重新排序现有元素

官方解释：

你可以用v-model 指令在表单＜input> 、 <textarea＞及<select＞元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

v-model会 忽略所有表单元素的value 、checked 、 selected attribute 的初始值。 它将始终将当前活动实例的数据作为数据来源。你应该通过JavaScript在组件的 data选项中声明初始值。

v-bind （:value="msg"）负责将data变量显示页面input框

v-on (@input="changeValue) 负责利用函数中事件对象获取页面input框的值传data变量使其发生改变

缺陷：v-model数据中每一次改变都会触发试图更新，特别消耗性能

因此官方为v-model设定了一些修饰符

lazy ,当输入框失去焦点,再去同步输入框中的数据

trim:自动过滤用户输入的首尾空白字符

如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符

问题分析：

在Vue中，想对input的值进行绑定，需要使用v-model指令。

举例如下：

HTML代码：

<div id="app">

    <input type="text" v-model="val">

</div>

JavaScript（Vue）代码：

var vm = new Vue({

    el: '#app',

    data: {

        val: '我是初始化值'

    }

});

初始化运行结果：

在控制台中执行 vmval="我是被修改的值"; 后的运行结果：

你可以在js代码的任意位置使用vmval = 'xxxx';来变更已绑定的input的值。

主要的原因是vue相当于套了一层，界面上的输入框会关联model，提交表单的时候，他是直接提交model的值，而不是传统的输入框里面的值。

所以用这种：

此时界面上已经有值了，可能数据点下输入框，数据消失，也可能不消失。

提交按钮按下后，要不就是前端提示没值，要不就是后端提示送来的值为空。

这里就是因为那个model的问题。

只需要把事件关联上就可以了：

这样前端就不会提示没数据，后端也能拿到数据了。

一般我是在data里建一个对象 form:{name:'',age:'',score:''}

然后每个input绑定的是model="formname"，

另一个input的绑定的是model="formage"

thisform就是所有的input绑定的值都在里面，这样你也得到了全部的值呢

以上就是关于vue基础知识简述(v-if&v-for&v-show&v-model)全部的内容，包括:vue基础知识简述(v-if&v-for&v-show&v-model)、vue语法获取里面的input标签吗、vueinput设置value等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！