vue自定义指令 html,Vue11Vue自定义指令.html

自定义指令 | Vue

添加品牌

id:

Name:

Keywords:

IDNameMethod

{{ item.id }} {{ item.name }} 删除

testMessage

// 自定义指令

// 注册全局指令 v-focus

// 参数1 指令的名称 定义时候不需要 v- 的前缀，调用的时候加上前缀

// 参数2 是一个对象，包含和指令相关的函数，这些函数可以在特定的阶段执行相关的操作

// 和样式相关的最好在 bind 中设置 和 js 行为相关设置在 inserted 中

Vue.directive('focus', {

// 当被绑定元素插入到 DOM 中的时候

inserted: function (el) {

// 聚焦元素

el.focus();

},

update: function (el) {

}

})

Vue.directive('color',{

bind: function (el, binding){

el.style.color = binding.value; // 设置样式时候不需要考虑是否被插入到dom中，当组件插入到页面中的时候，肯定会解析css样式

console.log('Testing binding: ', binding.name);

console.log('Testing binding: ', binding.value);

console.log('Testing binding: ', binding.expression);

},

})

//实例化vue对象

var app = new Vue({

el: "#app",

data: {

id: "",

name: "",

keywords: "", //搜索的关键字

list: [

{ id: 1, name: "以纯" },

{ id: 2, name: "森马" },

{ id: 3, name: "真维斯" },

],

},

methods: {

add() {

var clothes = { id: this.id, name: this.name }

this.list.push(clothes)

this.id = this.name = ""

},

del(id) { //根据id删除数据

//分析，如何根据id找到要删除的索引数据

//找到索引后，直接调用数组的 splice 方法

// this.list.some((item, i)=>{

// if(item.id == id){

// this.list.splice(i,1)

// return true;

// //在数组的 some 方法中，如果return true 就会立即终止这个数组的后续循环

// }

// })

var index = this.list.findIndex(item => {

if (item.id == id) {

return true;

}

})

this.list.splice(index, 1);

},

search(keywords) { //use keywords to search data/messages

//var newList = []

// this.list.forEach(item => { //please pay attention to 'forEach', and it's structure

// if(item.name.indexOf(keywords) != -1){

// newList.push(item)

// }

// })

// return newList

// another method

// Notice: forEach、 some、 filter、 findIndex . All of these are new methods of Array

var newList = this.list.filter(item => {

// if (item.name.indexOf(keywords) != -1)

// Notice: in ES6, there is a new method of type string, and name is

// string.prototype.includes('The string to include') if include then return true

if (item.name.includes(keywords)) {

return item

}

})

return newList

//或者直接 return this.list.filter() 方法

}

},

// 局部自定义指令，只在当前定义的组件中使用

directives: {

'fontweight': { // 指令名称

// 指令的定义

bind: function(el, binding){

el.style.fontWeight = binding.value;

}

},

'fontsize': function (el, binding) { // 注意这个function 等同于把代码写道 bind 和 update 中去。

el.style.fontSize = parseInt(binding.value) + "px";

}

},

})

//Vue的过滤器

//Vue.filter('过滤器的名称',)

一键复制

编辑

Web IDE

原始数据

按行查看

历史