1、Vue.js如何获取Url查询字符串值?
url地址"/mypage?q=food";
this.$route.query.q;
2、Vue.js获取字符串长度示例
myvariable.length;
3、Vue.js启用禁用输入字段示例
<div id="app">
<input type="text" :disabled="isDisabled">
<button @click="isDisabled = !isDisabled">Enable/Disable</button>
</div>
new Vue({
el: '#app',
data: {
isDisabled: false
}
})
4、Vue.js滚动到div的底部
var divContainer = this.$el.querySelector("#divId");
divContainer.scrollTop = divContainer.scrollHeight;
5、Vue.Js滚动到页面示例的底部
document.body.scrollTop = document.body.scrollHeight;
6、页面加载中Vue.Js调用函数
new Vue({
// ...
methods:{
myFunction: function() {//definition goes here}
},
created: function(){
this.myFunction()
}
});
7、Vue.Js Trim 去除字符串空白
<p>{{ text | trim }}</p>
new Vue({
el: '#app',
data: function() {
return {
text: ' This is string having space at both side. '
}
},
filters: {
trim: function(string) {
return string.trim()
}
}
});
8、Vue.js Substring截取字符串
<div id="app">
<p>{{ text | subStr}}</p>
</div>
new Vue({
el: '#app',
data: function() {
return {
text: ' This is sample string to show trim method. '
}
},
filters: {
subStr: function(string) {
return string.substring(0,15) + '...';
}
}
});
9、Vue.Js if else
<div id="mainDiv"></div>
new Vue({
el: "#mainDiv",
template: '<div v-if="name"><span v-text="name"></span></div>',
data: {
name: "John"
}
});
10、Vue.js Mouseover事件
<div id="myDiv">
<div v-show="active">Show</div>
<div v-on="mouseover: mouseOver">Mouse Hover over to test!</div>
</div>
var demo = new Vue({
el: '#myDiv',
data: {
active: false
},
methods: {
mouseOver: function(){
this.active = !this.active;
}
}
});
11、Vue.js强制重新加载重新渲染页面视图示例
vm.$forceUpdate();
12、Vue.Js Focus输入元素示例
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
});
13、Vue.JS watch监听改变值事件
<div id="app">
{{ message }}
<span>{{myVal}}</span><br />
<input v-model="myVal">
</div>
new Vue({
el: '#app',
data: {
message: 'On change event example',
myValue: 50
},
watch: {
'myValue': function(val, preVal){
if (val < 50) {
this.message= 'Value is less than 50';
}else{
this.message= 'Value is greater than 50';
}
}
}
})
14、Vue.JS检查Object或Array是否为空示例
<ul id="exampleApp">
<li v-if="!items.length">No item found</li>
<li v-for="item in items">
<!--do whatever you want-->
</li>
</ul>
var exampleApp = new Vue({
el: '#exampleApp',
data: {
items: []
}
});
15、Vue.js获取数组长度
<ul id="exampleApp">
<li v-if="items.length">Object Length = {{items.length}}</li>
<li v-for="item in items">
{{ item.fruit }}
</li>
</ul>
var exampleApp = new Vue({
el: '#exampleApp',
data: {
items: [
{ fruit: 'Mango' },
{ fruit: 'Apple' },
{ fruit: 'Banana' }
]
}
});
16、Vue.js数组push| 添加元素到数组示例
<div id="app">
<h1>List</h1>
<div v-for="(listItem, index) in list">
<input v-model="listItem.a" value="{{listItem.a}}">
</div>
<button @click="addList">
Add New List
</button>
<b>{{ list }}</b>
</div>
new Vue({
el: '#app',
data: {
list: [{a: 'Hello World!' }]
},
methods: {
addList: function () {
this.list.push({ a: 'Hello World!' });
}
}
});
17、Vue.js从Array 中删除元素
<div id="app">
<h1>List</h1>
<div v-for="(listItem, index) in list">
<input v-model="listItem.a" value="{{listItem.a}}">
<button @click="deleteList(index)"> Delete List</button>
</div>
<button @click="addList">Add New List</button>
<b>{{ list }}</b>
</div>
new Vue({
el: '#app',
data: {
list: [{a: 'Hello World!' }]
},
methods: {
addList: function () {
this.list.push({ a: 'Hello World!' });
},
deleteList: function (index) {
this.list.splice(index, 1);
}
}
});
18、Vue.Js设置textarea值
<div id="app">
<h1>TextArea</h1>
<textarea v-model="myTextarea" placeholder="add multiple lines"></textarea>
</div>
new Vue({
el: '#app',
data: {
myTextarea: ['Hello World!']
}
});
19、Vue.Js获取文本区域值
<div id="app">
<h1>TextArea</h1>
<textarea v-model="myTextarea" placeholder="add multiple lines"></textarea>
<p>TextArea Value = {{myTextarea}}</p>
</div>
new Vue({
el: '#app',
data: {
myTextarea: ['Hello World!']
}
});
20、如何在Vue.JS示例中使用setTimeOut
<div id="app">
{{message}}
</div>
new Vue({
el: '#app',
data: {
message:"Hello World!"
},
methods:{
testFunction: function () {
var v = this;
setTimeout(function () {
v.message = "Hi Vue!";
}, 3000);
}
},
mounted () {
this.testFunction()
}
});