js list删除指定元素_20个vue.js基础示例代码（120）

(给100素材网点亮★号，提升开发技能)

1、Vue.js如何获取Url查询字符串值？

url地址"/mypage?q=food"; 

this.$route.query.q;

2、Vue.js获取字符串长度示例

myvariable.length;

3、Vue.js启用禁用输入字段示例

"app">"text" :disabled="isDisabled">"isDisabled = !isDisabled">Enable/Disable



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 去除字符串空白

{{ text | trim }}



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截取字符串

"app">

{{ text | subStr}}



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

"mainDiv">



new Vue({
el: "#mainDiv",
template: '
data: {
name: "John"
}
});

10、Vue.js Mouseover事件

"myDiv">

"active">Show

"mouseover: mouseOver">Mouse Hover over to test!



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监听改变值事件

"app">{{ message }}{{myVal}}"myVal">



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是否为空示例

"exampleApp">"!items.length">No item found"item in items">


var exampleApp = new Vue({
el: '#exampleApp',
data: {
items: []
}
});

15、Vue.js获取数组长度

"exampleApp">"items.length">Object Length = {{items.length}}"item in items">{{ item.fruit }}

var exampleApp = new Vue({
el: '#exampleApp',
data: {
items: [{ fruit: 'Mango' },{ fruit: 'Apple' },{ fruit: 'Banana' }
]
}
});

16、Vue.js数组push| 添加元素到数组示例

"app">

List

"(listItem, index) in list">"listItem.a" value="{{listItem.a}}">

"addList">
Add New List{{ list }}



new Vue({
el: '#app',
data: {
list: [{a: 'Hello World!' }]
},
methods: {
addList: function () {
this.list.push({ a: 'Hello World!' });
}
}
});

17、Vue.js从Array 中删除元素

"app">

List

"(listItem, index) in list">"listItem.a" value="{{listItem.a}}">"deleteList(index)"> Delete List

"addList">Add New List{{ list }}



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值

"app">

TextArea

"myTextarea" placeholder="add multiple lines">



new Vue({
el: '#app',
data: {
myTextarea: ['Hello World!']
}
});

 19、Vue.Js获取文本区域值

"app">

TextArea

"myTextarea" placeholder="add multiple lines">

TextArea Value = {{myTextarea}}



new Vue({
el: '#app',
data: {
myTextarea: ['Hello World!']
}
});

20、如何在Vue.JS示例中使用setTimeOut

"app">{{message}}



new Vue({
el: '#app',
data: {
message:"Hello World!"
},
methods:{
testFunction: function () {
var v = this;
setTimeout(function () {
v.message = "Hi Vue!";
}, 3000);
}
},
mounted () {
this.testFunction()
}
});