Vue模板语法（01）

一、插值

二、指令

三、过滤器

四、计算属性与监听属性

五、购物车案例

一、插值

①、文本

语法：{ {定义的变量}}

②、html

语法：

v-html="定义的变量"

③、属性绑定

语法：


v-bind:value="定义的变量"
:value="定义的变量"

④、表达式

Vue提供了完全的JavaScript表达式支持

⑤、class绑定

语法：

:class="定义的变量"

⑥、style绑定

语法：

:style="定义的变量"

代码：


html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
		<style>
			.a{
				color:yellow;
			}
		style>
	head>
	<body>
		<div id="app">
			<p>文本p>
			{
   {msg}}
			<hr />
			<p>html页面转义p>
			<div v-html="htmlstr">div>
			<hr />
			<p>v-bind 属性绑定p>
			<input value="值"/>
			<input v-bind:value="valuestr"/>
			<input :value="valuestr"/>
			<hr />
			<p>vue中可以对变量进行二次处理p>
			{
   {str.substring(0,4)}} <br />
			{
   {num+4}}<br />
			{
   {ok ? '1' : '0'}}<br />
			<span :id="idstr+'1'">书籍信息span>
			<hr />
			<p>class绑定p>
			<span :class="calssStr">文本内容span>
			<hr />
			<p>style绑定p>
			<span :style="styleStr">文本内容span>
		div>
		<script type=&#

相关阅读:
在线权鉴、签约、授权-逐浪CMS面向web3.0的韬略与实践
django: You may need to add ‘localhost‘ to ALLOWED_HOSTS
手写操作系统篇：环境配置
AOP的动态代理机制
Tomcat 安装和简单介绍
vscode离线安装插件
题目0100-找单词
常用 Shell 脚本
在虚拟机中安装Linux操作系统详细步骤
【JavaScript高级】03-JavaScript内存管理和闭包

原文地址：https://blog.csdn.net/m0_62604616/article/details/126668826