.native
.native为vue中的修饰符之一，prevent/stop类似。
当点击事件触发不了时可以加上去看看，具体不多赘叙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<h3>vue .native解决有时点击不生效的需求</h3>
<!-- 错误写法 -->
<!-- <el-input @click="show" placeholder="注意观察单击时,控制台"></el-input> -->
<!-- 正确写法-->
<el-input @click.native="show" placeholder="注意观察单击时,控制台"></el-input>
<p>
ps： click为饿了么ui未封装的原生js方法,想要触发el-input组件的click用native
</p>
<p>面试官问：input点击时需不需要加.native修饰符?</p>
<p>
<input type="radio" name="a" value="不需要" v-model="res" />不需要
<input type="radio" name="a" value="需要" v-model="res" />需要
</p>
<p style="color: red" v-show="res==='需要'">没理解！！</p>
<p style="color: green" v-show="res==='不需要'">理解！！</p>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data() {
return {
res: "",
};
},
methods: {
show() {
console.log(1);
},
},
});
</script>
</html>
网友评论