vue-02：vue常见属性
vue-02：vue常见属性
参考博客：咸鱼最牛逼
地址：https://blog.csdn.net/panchang199266?utm_source=feed
一、vue属性集合
1、属性集合：
v-bind、v-if、v-else-if、v-else、v-for、v-html、v-model、v-on、v-once、v-pre、v-show、v-text2、v-bind(简写:)/html/text：-any
图片介绍：
使用介绍：
// dom属性赋值
{{item}}
我是标题
![]()
我是标题
![]()
// dom元素绑定HTML
// dom元素绑定v-text
ajax
// DOM元素绑定样式 :class,:style
绑定元素样式
绑定元素多个样式
绑定style
data() {
return {
nameList:['apple','banana','potato','orange'],
title:'vuelearning',
url:'https://wx.qlogo.cn/mmopen/vi_32//132',
htmls: "我是h2
",
text: 'axios',
flag: true,
colors:'red',
};
},
3、v-model:
vue官网介绍：https://cn.vuejs.org/v2/guide/forms.html
图文介绍：
使用介绍：
// 单行文本input
Message is: {{ message }}
// 多行文本textarea
{{ message }}
// 复选框
// 单个复选框，绑定到布尔值：
// 多个复选框，绑定到同一个数组
Checked names: {{ checkedNames }}
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
// 单选按钮
Picked: {{ picked }}
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
// 单选下拉框
Selected: {{ selected }}
new Vue({
el: '...',
data: {
selected: ''
}
})
// 多选下拉框
Selected: {{ selected }}
new Vue({
el: '#example-6',
data: {
selected: []
}
})
// 用 v-for 渲染的动态选项
Selected: {{ selected }}
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})总结：v-model添加以下属性，
.lazy：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步。
.number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
.trim：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
4、v-on:/@点击事件
图文介绍：
使用介绍：
{{inputVal}}
/*设置input控件值*/
data() {
return {
inputVal: '',
};
},
methods:{
getMsg(){
alert(this.inputVal)
},
setMsg(){
this.inputVal = "vueElement";
},
},5、v-if、v-else-if、v-else：判断
图片介绍：
代码介绍：
// if判断，数值可用''包裹，若是字符需要''包裹
1
2
3
data() {
return {
index:3,
};
},6、v-once:
图片介绍：
代码介绍：
// v-once只会渲染一次，数据修改不会再次改变,也就是data() return {}中初始定义的值
{{inputVals}}
{{inputVals}}
data() {
return {
inputVals:'',
};
},7、v-pre:
图片介绍：
代码解释：
{{msg}}
这时并不会输出我们的msg值，而是直接在网页中显示 {{msg}}8、v-show：
图片介绍：
代码解释：
// v-show显示隐藏
v-show显示数据
data() {
return {
flags:true,
};
},
总结：当某个标签使用v-show为false时，类似于CSS属性display:none。代码案例如下，但是v-if=false是，整个页面就没有改dom节点。
9、获取未绑定数据的DOM控件的值 ref 和 this.$refs
代码介绍：
这是一个box盒
methods:{
getInputValue(){
this.$refs.box.style.background='red';
alert(this.$refs.userInfo.value);
}
},