关于vue属性使用和不使用冒号的区别说明

vue中冒号：是v-bind的缩写。

一直最常见的做法是代表绑定一个变量。

但是我今天用到复选框是时候缺出现选不中的情况

<el-checkbox v-model="checked" >备选项</el-checkbox> checked:1但是没有选中

然后我想可能是没有写true-label，于是这样写。因为true-label接收一个数值或者字符串。我的默认值是数值。

<el-checkbox v-model="checked" true-label=1 false-label=0 >备选项</el-checkbox> 但是还是没有选中

然后看了

但是定义的 checked:1类型是数值并不是boolean型的

我们可以这样修改

<el-checkbox v-model="checked" :true-label="1" :false-label="0" >备选项</el-checkbox>

<input :disable="true">打开</input>

输出：true 或 false 值是变量Boolean类型

<input disable="true">打开</input>

输出：true 值是String类型

补充知识：Vue的标签属性label中字符串拼接变量

问题

问题描述：Vue的标签属性label中字符串拼接变量

问题解决

<el-form-item :label="`参数${(index + 1)}类型`" v-for="(item, index,) in props.row.params">
  <span v-text="item"></span>
</el-form-item>

结果展示

以上这篇关于vue属性使用和不使用冒号的区别说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue计算属性的使用

    我们都知道在Vue构造函数的参数对象中有一个[data]属性,该属性值是一个对象,该对象是对数据的代理,是一个键值对并且时刻与页面表现是一致的,但是这里面只能是简单的键值对,不能拥有业务逻辑,并且由于[data]中的属性属于同一个生命周期,所以如果我们需要某一个属性是依赖于另外一个属性时,在[data]中是做不到的,于是Vue为我们提供了[计算属性] 一.计算属性 1.1 概述 计算属性归根结底也是属性,它也是跟表现层是时刻同步的,虽然我们可以在插值中对数据进行各种处理,但是插值中的表达式处理毕

  • 对VUE中的对象添加属性

    背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'}, {label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}] 1) 通过post调用接口获取minDa

  • 浅谈vue中慎用style的scoped属性

    在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为在我们需要修改公共组件(三方库或者项目定制的组件)的样式的时候,scoped往往会造成更多的困难,需要增加额外的复杂度. scoped实现私有化样式的原理 为什么会说,会增加复杂度?那么我们先从的实现模块的原理说起.为了方便称呼,我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件. 通过查看DO

  • 关于vue属性使用和不使用冒号的区别说明

    vue中冒号:是v-bind的缩写. 一直最常见的做法是代表绑定一个变量. 但是我今天用到复选框是时候缺出现选不中的情况 <el-checkbox v-model="checked" >备选项</el-checkbox> checked:1但是没有选中 然后我想可能是没有写true-label,于是这样写.因为true-label接收一个数值或者字符串.我的默认值是数值. <el-checkbox v-model="checked" t

  • vue 属性拦截实现双向绑定的实例代码

    下面通过代码给大家介绍vue 属性拦截实现双向绑定,具体代码如下所示: let obj = {} let get = '' Object.defineProperty(obj, 'get', { set: function(val) { document.getElementById('input').value = val document.getElementById('text').innerHTML = val } }) document.getElementById('input').

  • vue属性props默认类型的写法介绍

    目录 vue属性props默认类型 props自定义属性 vue属性props默认类型 Vue.component('my-component', { props: { // 基础的类型检查 (`null` 匹配任何类型) //单个类型 propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, //函数 propC: { type:Function,

  • 浅析Vue.js中v-bind v-model的使用和区别

    v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据 最基础的就是实现一个联动的效果 <body> <div class="app"> <span>Multiline message is:</span> <p>{{message}}</p> <br> &l

  • 详谈vue中router-link和传统a链接的区别

    Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案.在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Link,通过实现跳转,这和传统的何其相似!但它们到底有什么具体的区别呢? 官方中给出的解释是这样的: <router-link> 比起写死的 <a href="..." rel="external nofollow" rel="external nofollow" >

  • Vue中this.$router和this.$route的区别及push()方法

    官房文档里是这样说明的: 通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由 可以理解为: this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法. this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, pa

  • 关于Vue的 watch、computed和methods的区别汇总

    目录 1 前言 2 基础用法 2.1 methods 方法 2.2 computed 计算属性 2.3 watch 侦听器 3 三者的区别 3.1 方法 VS 计算属性 3.2 计算属性 VS 侦听器 1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, watch: {} }) 这个选项对象可以指定非常多的选项(或者说属性),和数据相关的选项有:包括但

  • 详解Vue中Computed与watch的用法与区别

    目录 computed computed只接收一个getter函数 computed同时接收getter函数对象和setter函数对象 调试 Computed watchEffect 立即执行 监听基本数据类型 停止watchEffect 清理watchEffect watchPostEffect 和 watchSyncEffect watchEffect不能监听对象 watch 监听单个数据 监听多个数据(传入数组) 官方文档总结 computed watchEffect watch comp

  • vue修饰符v-model及.sync原理及区别详解

    目录 v-model的原理 .sync的原理 v-model和.sync修饰符的区别 总结作用场景: v-model的原理 v-model的本质,其实就是:value和@input事件的语法糖 <!--v-model写法--> <my-component type="text" v-model="num"> <!--展开语法糖后的写法--> <my-component type="text" :value

  • Vue axios和vue-axios的关系及使用区别

    目录 axios和vue-axios的关系/区别 axios和vue-axios的使用方式区别 1.axios使用方式 2.vue-axios使用方式 axios和vue-axios的使用哪一种较好 vue-axios-plugin插件的使用 axios和vue-axios的关系/区别 1.axios是基于promise的HTTP库,可以使用在浏览器和node.js中,它不是vue的第三方插件2.axios使用的时候不能像vue的插件(如:Vue-Router.VueX等)通过Vue.use()

随机推荐