vue-02：vue常见属性

参考博客：咸鱼最牛逼

地址：https://blog.****.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-text

2、v-bind(简写:)/html/text：-any

图片介绍：

       

使用介绍：

// dom属性赋值
<li v-for="(item,key) in nameList" v-bind:key="key">
	{{item}}
</li>
<div v-bind:title="title">我是标题</div>
<img v-bind:src="url"/>
<div :title="title">我是标题</div>
<img :src="url"/>

// dom元素绑定HTML
<div v-html="htmls"></div>

// dom元素绑定v-text
<div v-text="text">ajax</div>

// DOM元素绑定样式 :class,:style
<div v-bind:class="{'red':flag}">绑定元素样式</div>
<div v-bind:class="{'red':flag,'font':flag}">绑定元素多个样式</div>
<div v-bind:style="{'color':colors}">绑定style</div>

data() {
		return {
		nameList:['apple','banana','potato','orange'],
		title:'vuelearning',
		url:'https://wx.qlogo.cn/mmopen/vi_32//132',
		htmls: "<h2>我是h2</h2>",
		text: 'axios',
		flag: true,
		colors:'red',
		};
	},

<style>
.red{
    color:red;
}
.font{
font-size:18ps;
}
</style>

3、v-model:

vue官网介绍：https://cn.vuejs.org/v2/guide/forms.html

图文介绍：

使用介绍：

// 单行文本input
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

// 多行文本textarea
<p style="white-space: pre-line;">{{ message }}</p><br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

// 复选框
// 单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

// 多个复选框，绑定到同一个数组
<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

// 单选按钮
<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

// 单选下拉框
<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

// 多选下拉框
<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

// 用 v-for 渲染的动态选项
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

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事件进行同步。

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

<input v-model.number="age" type="number">

.trim：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

4、v-on:/@点击事件

图文介绍：

使用介绍：

<input type="text" v-model="inputVal"/><br />
<p>{{inputVal}}</p>

<button v-on:click="getMsg">获取表单数据</button><br />
/*设置input控件值*/
<button @click="setMsg">设置表单数据</button>

data() {
	return {
		inputVal: '',
	};
	},
	methods:{
	getMsg(){
		alert(this.inputVal)
		},
		setMsg(){
		this.inputVal = "vueElement";
		},
},

5、v-if、v-else-if、v-else：判断

图片介绍：

   

代码介绍：

// if判断，数值可用''包裹，若是字符需要''包裹
<div>
	<span v-if="index ==='1' ">1</span>
	<span v-else-if="index === '2' ">2</span>
	<span v-else>3</span>
</div>

data() {
	return {
	 index:3,
	};
},

6、v-once:

图片介绍：

代码介绍：

// v-once只会渲染一次，数据修改不会再次改变,也就是data() return {}中初始定义的值
<input type="text" v-model="inputVals" />
<p>{{inputVals}}</p>
<p v-once>{{inputVals}}</p>

data() {
	return {
	 inputVals:'',
	};
},

7、v-pre:

图片介绍：

代码解释：

<div v-pre>{{msg}}</div>
这时并不会输出我们的msg值，而是直接在网页中显示 {{msg}}

8、v-show：

图片介绍：

代码解释：

// v-show显示隐藏
<div v-show="flags">v-show显示数据</div>
data() {
	return {
	 flags:true,
	};
},

总结：当某个标签使用v-show为false时，类似于CSS属性display:none。代码案例如下，但是v-if=false是，整个页面就没有改dom节点。

9、获取未绑定数据的DOM控件的值 ref 和 this.$refs

代码介绍：

<div>
	<input type="text" ref="userInfo" />
	<div ref="box">这是一个box盒</div>
	<button v-on:click="getInputValue">获取第二个表单里的数据</button>
</div>

methods:{
	getInputValue(){
	this.$refs.box.style.background='red';
	alert(this.$refs.userInfo.value);
	}		
},