相关语法
v-html指令
可以在页面中插入相应的页面代码并显示效果。
v-bind指令
以下实例判断 use 的值,如果为 true 使用 class1 类的样式,否则不使用该类。参考以下地址:
https://www.runoob.com/vue2/vue-template-syntax.html
https://cn.vuejs.org/v2/guide/syntax.html
Vue.js 都提供了完全的 JavaScript 表达式支持。
v-if指令
判断指令。这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
v-model指令
双向数据绑定。p便签调用了lb变量的值,input和lb变量双向数据绑定了,所以你在输入框中输入什么,p便签就马上显示什么。这样的好处是,不管怎么样输入框的值和lb变量的值都一样,如果需要提交表单的话,直接传输lb变量的值就行了。该指令还可以运用在其他地方,input、select、textarea、checkbox、radio 等表单控件元素。
v-on指令
(简写 @)按钮的事件我们可以使用 v-on 监听事件。本例子中,v-on(@)是用来监视button的,如果被点击就触发reverseLc方法。
过滤器filters
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。过滤器函数接受表达式的值作为第一个参数。以下实例对输入的字符串第一个字母转为大写:
v-if v-else-if v-else 指令
就是简单的if-else。
v-if:
v-else:
v-else-if:
v-show指令
可以使用 v-show 指令来根据条件展示元素
v-for指令
循环指令,循环某个数据集
显示某对象的属性值
显示键值对
显示键值对并加序号
直接循环整数
computed(计算属性)和methods(方法)
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
监听属性watch
样式绑定
我们可以为 v-bind:class 设置一个对象,从而动态的切换 class:
多个样式同时渲染
使用样式写入对象进行渲染
注意:将样式写入对象渲染时发现一个问题,如果将active3和active4位置对调,则active4失效(如下)
此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:
我们可以把一个数组传给 v-bind:class ,实例如下:
我们还可以使用三元表达式来切换列表中的 class :
事件处理器,v-on指令
v-on 可以接收一个定义的方法来调用。
除了直接绑定到一个方法,也可以用内联 JavaScript 语句: