vue中使用tsx语法
vue中使用tsx语法
·
中英文
DOM引入:
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
<div>{t('hello')}</div>
图片引入
tsx语法
- class 写成 className (react)
- lable 内的 for 写成 htmlFor (react)
- 自定义属性名写成小驼峰
- 标签内无内容写成单闭合
- 用到js语法加{}
tsx注释
单行注释和多行注释,都需要在大括号{}中编写
{
//我是单行注释
}
{/*我是一段注释*/}
tsx样式绑定
- 绑定class
<div className={"box title " + (active ? "active": "")}>我也是div元素</div>
- 绑定style
<div style={{color: "red", fontSize: "50px"}}>我是div,绑定style属性</div>
tsx事件绑定
注意:事件后跟函数,并非函数的调用
setup() {
let num = ref<number>(10)
const add = (event:any)=> {
console.log(event);
num.value++
}
const changeNum = (newValue:number,event:any)=>{
num.value = newValue
console.log(event);
}
return ()=>(
<div>
<h2>event-dmeo</h2>
{/*无传参*/}
<button onClick={add}>num++</button>
{/*有传惨,e为事对象*/}
<button onClick={(e)=>changeNum(100,e)}>changeNumber</button>
<p>num:{num.value}</p>
</div>
)
}
tsx列表渲染
利用map来生成dom
setup() {
interface user {
name: string,
age: number
}
let arr: user[] = reactive([{ name: 'wl', age: 18 }, { name: 'whb', age: 19 }])
return () => (
<div class="list-demo">
<ul>
{
arr.map(el => <li key={el.name}>{el.name}--{el.age}</li>)
}
</ul>
</div>
)
}
条件渲染
- 三元运算符
- 与运算符 &&
- v-show效果(主要是控制html标签的display属性是否为none)
setup() {
const show = ref<boolean>(false)
const changeShow = () => {
show.value = !show.value
}
return () => (
<div className="vif-demo">
<h2>条件判断</h2>
<button onClick={changeShow}>显示隐藏</button>
{
show.value && <div style={{ width: '200px', height: '200px', backgroundColor: 'red' }}>
</div>
}
</div>
)
}
插槽的使用
- 定义插槽
const Slots = defineComponent({
setup(props,{slots}) {
interface user {
name:string,
age:number
}
let user = reactive<user>({
name:'wl',
age:18
})
return ()=>(
<div class="slots">
<h2>插槽</h2>
{slots.center&&slots.center(user)}
</div>
)
}
})
- 使用插槽
setup() {
const slots = {
center:(props:any)=>(
<div class='center'>
<h2>111</h2>
<ul>
<li>{props.name}</li>
<li>{props.age}</li>
</ul>
</div>
)
}
return ()=>(
<div class="slots-demo">
<h2>slots demo</h2>
<Slots v-slots = {slots}>
</Slots>
</div>
)
}
更多推荐
已为社区贡献1条内容
所有评论(0)